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Q If this is your first time ever writing code, please don’t get overwhelmed. It’s 100% normal that you will 
not understand everything at the beginning. Just don't think “I guess coding is not for me”! 


YOU CAN DO IT * 
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ва You need to code along with me! You will learn ZERO HTML and CSS skills by just sitting and watching me 
code. You really have to write code YOURSELF! 
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If you want the course material to stick, take notes. Notes on code syntax, notes on theory concepts, 


Totally non-coding... Try to 
understand a single word @ 


eo Try all the coding challenges! Try to do your best, but if you get stuck for too long, watch the solution. 


Don't beat yourself up if you can't figure it out! Just rewatch the lectures that were covered in the 
challenge, try to understand them better, and move on. 
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Before moving on from a section, make sure that you understand exactly what was covered. Take a 


break, review the code we wrote, review your notes, review the projects we built, and maybe even write 
some code yourself. 
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12 If you have an error or a question, start by trying to solve it yourself! This is essential for your progress. If 


you can't solve it, check the Q&A section. If that doesn’t help, you can ask a new question. Use a short 
description, and post code on codepen.io. 
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ws Most importantly, have fun! It’s so rewarding to see something that YOU have built YOURSELF! So if you're 
feeling frustrated, stop whatever you're doing, and come back later! 
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г HyperText Markup Language 


< HTML is a markup language that web developers use to structure and 
describe the content of a webpage (not a programming language) 


< HTML consists of elements that describe different types of content: 
paragraphs, links, headings, images, video, etc. 


< Web browsers understand HTML and render HTML code as websites 


OMNIFCOD 


A healthy meal 
delivered to your door, 
every single day 

The smart 365 -days-per-year food subscription that will 


make you eat healthy again. Tailored to your personal tastes 
and nutritional needs. 


HTML 


< Element 


| 


<р>НТМІ 15 a markup language</p> 
AAA | eee 


г Opening tag: Name 
of the element, 
wrapped in « and > 


г Content: Content of the element, іп 
this example text. But it might be 
another element (child element). Some 
elements have no content (e.g. <img>) 


г Closing tag: Same as 
opening tag, but with 
a /. When element has 
no content, it's omitted 
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=> Cascading Style Sheets 


< CSS describes the visual style and presentation of the content 
written in HTML 


& CSS consists of countless properties that developers use to format 
the content: properties about font, text, spacing, layout, etc. 
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THE RGB MODEL 


Р С В 
255 O О 
< RGB Model: Every color can 
be represented by a R С В R G B 
combination of RED, GREEN 255 255 O 255 O 255 
and BLUE 
< Each of the 3 base colors 
can take a 8 between О R G B R G E 
and 255, which leads to 16.8 255 255 255 О О О 
million different colors 
0  |——É 255 
0 ШШ 255 в с B в с B 
О О 255 


0 MMe °*° 


к С В 
О 255255 


@ ВОВ / RGBA NOTATION a HEXADECIMAL NOTATION 


г Regular RGB model г Instead of using a scale from O to 255, we go 


rgb(0, 255, 255) ГИ 


< RGB with transparency (“alpha”) 


from O to ff (255 in hexadecimal numbers) 


г Shorthand, when all colors are identical pairs 
өн 


In practice, we mostly use hexadecimal 


rgba(0, 255, 255, 0.3) 


C) 


#f4b33f colors, and rgba when we need transparency 


rgb(244, 179, 63) rgba(244, 179, 63, 0.7) 


г Color picker in VS Code 


с When colors in all З 
channels are the same, 
we get a grey color 


=" There are 256 pure 
grays to choose from 


rgb(0, 0, 0) / #000000 / #000 m 


rgb(69, 69, 69) / #444444 / #444 m 


rgb(183, 183, 183) / #b7b7b7 


rgb(255, 255, 255) / #ffffff / #fff 
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CONFLICTING SELECTORS AND DECLARATIONS 


<p 1d="author-text? ="author"> 


Posted бу=ьгига Jones on могда June 21st 2027 


=) There are multiple selectors selecting the 
same element. Which one of them applies? 


All of them. All rules and properties are applied! 


2) But there are conflicting font-size 
declarations! 16 it 18px, or 20px, or 22рх? 


Let's see how It works... 


„author 4 
font-style: 
font-size: 18px; 


#author-text 4 
font-size: 20px; 


р, 

li i 
font-family: 
color: 114444444; 
font-size: 22px; 


що 
чу 


RESOLVING CONFLICTING DECLARATIONS 


Highest 
priority 


Lowest 
priority 


Declarations marked ! important 
| No important! 2 
Inline style (style attribute in HTML) 


| No inline style? 
< Last selector in 
code applies * 


| Мо # selector? 7 
Class (.) ог pseudo-class (:) selector 


Multiple? 


ID (4) selector Multiple? 


| No . ог: selector? 
Element selector (р, div, 11, etc.) | 
Multiple? 


| No element selector? 


Universal selector (x) 


* Its a bit more complicated in reality 


Ча, 


‚author 4 
font-style: 
font-size: 18 


#author-text { 
font-size: 20 


{ 
font-family: 
color: (14444444. 
font-size: 22 


^ There is an ID selector 


(#author-text), so for the 
conflicting font-size property, 
this is the selector that applies 
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HOW INHERITANCE WORKS 


body { 
color: Ш#444444; 
color: 11#444444; font-size: 16px; 


| | font-size: 16рх; font-family: 
the navigation | font-family: 


</nak> border-top: 10px (181098айа; 


<h1>My websitec/h1: O ee 
font-family: 
«p» 
The text is this paragrank 


color: І1Я444444; 
is completely irrelevant © 


TER EU Жор color: 818199889; | OVERRIDING 
” МУДРИ | font-size: 32рх; | INHERITED 5ТҮ 


text-transform: 
</body> 


Not all properties get inherited. It’s mostly ones related to text: font-family, font-size, font-weight, font- 
style, color, Line-height, letter-spacing, text-align, text-transform, text-shadow, list-style, etc. 
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Visible part of element on the page 


margin < Content: Text, images, etc. 


padding < Border: A line around the element, 
still inside of the element 
=> Padding: Invisible space around the 
content, inside of the element 


height 


=> Margin: Space outside of the 
element, between elements 


CONTENT 


FILL AREA > Fill area: Area that gets filled with 


background color or background 
image 


border 


ANALOGY FOR THE CSS BOX MODEL 


border 


Content area 


margin 


padding 


Final element width = left border + left padding + 


width + right padding + right border | passin 


Final element height = top border + top padding 
+ height + bottom padding + bottom border 


heir 


CONTENT 


border 


г We can specify all these values using CSS properties 


< This is the default behavior, but we can changeit . --................................. т 
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6/55 ТНЕОЕ а г Реза 
БОХЕ5 


HTML 


г Elements are formatted visually as blocks 


г Elements occupy 100% of parent element's width, 
no matter the content 


г Elements are stacked vertically by default, one 
after another 


=> Тһе box-model applies as showed earlier 


Default elements: body, main, header, 
footer, section, nav, aside, div, hl-h6, 


p, ul, ol, 11, etc. 


With CSS: display: block 


The Basic Language of the Web: HTML 


Posted by Laura Jones on Monday, June 21st 2027 


ass-"header-black-i 
19-" пау 
а55- page-sectio 
' :before 
«div class="fes7-img 


class="fes7-img 


class-"containe! 


All modern websites and web applications are built using three fundamental 
echnologies: HTML, CSS and JavaScript. These are the languages of the web. 


In this post, let's focus on HTML. We will learn what HTML is all about, and why 
should learn it. 


What is HTML? 


Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam recusandae 
reprehenderit vitae ratione veritatis corrupti sit ut vero, dolores nulla 
exercitationem eos quod iusto incidunt, perferendis alias tenetur. Est, vel! 


You can learn more at the MDN Web Docs. 


г Occupies only the space necessary for its content 


& Causes no line-breaks after or before the element 


г Box model applies in a different way: heights and 
widths do not apply 


= Paddings and margins are applied only 
horizontally (left and right) 


Default elements: a, img, strong, em, 
button, etc. 


With CSS: display: inline 


The Basic Language of the Web: HTML 


Posted by [Laura Joned] on Monday, June 21st 2027 


а55=" ћеадег-ђ] ас 
1d="nav 


class="page-sectioı 
before 
<div class="fes7-img-cont 
class="fes7-img 


сТа55-“ соптатпе! 


All modern websites and web applications are built using three 
technologies: HTML, CSS and JavaScript. These are the languages of the web. 


In this post, let's focus on HTML. We will learn what HTML is all about, and why 
should learn it. 


What is HTML? 


Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam recusandae 
reprehenderit vitae ratione veritatis corrupti sit ut vero, dolores nulla 
exercitationem eos quod iusto incidunt, perferendis alias tenetur. Est, vel! 


In HTML, each element is made up of 3 parts: 


1. The opening tag 
2. The closing tag 
3. The actual element 


You can learn more at the IMDN Web Docs}. 


Elements formatted visually as “- 
blocks 


100% of parent's width 
@- 
Vertically, one after another 


Box-model applies as showed —y 
ш 


Looks like inline from the 


outside, behaves like block- 
level on the inside 


Occupies only content’s space 


Causes no line-breaks 


Box-model applies as showed 


display: inline-block 


Occupies only content's space 


Causes no line-breaks 


Box model is different: heights 
and widths do not apply 


Paddings and margins only 
horizontal (left and right) 
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HTML 


Default positioning 


Element is “in flow” 


Elements are simply laid out 
according to their order in the 
HTML code 


Default positioning 


position: relative 


> Element is removed from the 


normal flow: “out of flow” 


No impact on surrounding 
elements, might overlap them 


г We use top, bottom, left, or 


right to offset the element 
from its relatively positioned 
container 


position: absolute 


100рх 


200рх 


.container 4 
position: relative; 
background-color: #f7e6c1; 
} 
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THE 3 WAYS OF BUILDING 
LAYOUTS 


HTML CSS 


Clippings 


The new way for 
interior professionals 
to buy furniture 


< Layout is the way text, images and other 
content is placed and arranged on a webpage 


< Layout gives the page a visual structure, into | —— 
| E type of project 
which we place our content ү уре of projec 


< Building a layout: arranging page elements 
into a visual structure, instead of simply having 
them placed one after another (normal flow) 


We work with... 
Interior designers 


Clippings Platform v For v Projects Book a demo Log in 


The new way for 
interior professionals 
to buy furniture 


Sign up Book a demo ? 


Find furniture for every 
type of project 


Browse HONS O 
from the world's 
leading brands 


Source from anywhere 77 Free samples 


зе! free fabric, wood, marble 


3 à and rug sample 
th the Clip Tool 


We work with... 
Interior designers 


„ёз ">= 


lospitality 
he Silo Restaurant, London by Nina+Co 


650+ brands 


Browse millions of products fro 
the world's leading brands. 


[0] Source from anywhere 


items from any website with the 


Clip Tool. 


ва 


[ә | [Trade pricing ______ 


See trade pricing and lead times 


right away. No need to request 
quote. 


Free samples 


et free fabric, wood, marble 
and rug samples. 


FLOAT LAYOUTS 


The old way of building 
layouts of all sizes, using the 
float CSS property. Still used, 
but getting outdated fast. 


FLEXBOX 


Modern way of laying out 
elements in a 1-dimensional 
row without using floats. 


Perfect for component layouts. 


CSS GRID 


For laying out element in a 
fully-fledged 2-dimensional 
grid. Perfect for page layouts 
and complex components. 
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Default positioning 


Element is “in flow” 


Elements are simply laid out 
according to their order in the 
HTML code 


Default positioning 


position: relative 


> Element is removed from the 


normal flow: “out of flow” 


No impact on surrounding 
elements, might overlap them 


г We use top, bottom, left, or 


right to offset the element 
from its relatively positioned 
container 


position: absolute 


E 


> Element is removed from the 


normal flow: "out of flow" 


& Text and inline elements will 
wrap around the floated 
element 


= The container will not adjust its 
height to the element 


float: left 
float: right 
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| padding 


| а u 


box-sizing: border-box 


height height 


CONTENT CONTENT 


border 


Final element width = right-eerder + rightpectding lefrpaediñg + Te er 
Final element height = top-berder + top-paeding bottorms-gadding + bottum-aurder 
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Flexbox is a set of related CSS properties for building 1-dimensional layouts 


The main idea behind flexbox is that empty space inside a container element 
can be automatically divided by ¡ts child elements 


Flexbox makes it easy to automatically align items to one another inside a 
parent container, both horizontally and vertically 


Flexbox solves common problems such as vertical centering and creating 
equal-height columns 


Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner 
HTML and CSS code 


Flex items Flex container 


MAIN AXIS 


CROSS AXIS 


display: flex 


gap: 0 | <length> 


< To create space between items, without using margin 


justify-content: flex-start | flex-end | center | 
space-between | space-around | space-evenly 


& To align items along main axis (horizontally, by default) 


align-items: stretch | flex-start | flex-end | 


center | baseline 


& То align items along cross axis (vertically, by default) 


flex-direction: row | row-reverse | column | 


column-reverse 


< To define which is the main axis 


flex-wrap: nowrap | wrap | wrap-reverse 


= To allow items to wrap into a new line if they are too large 


align-content: stretch | flex-start | flex-end | 
center | space-between | space-around 


& Only applies when there are multiple lines (flex-wrap: wrap) 


CROSS AXIS 


MAIN AXIS 


align-self: auto | stretch | flex-start | flex- 
end | center | baseline 


< То overwrite aL ign- items for individual flex items 


flex-grow: 0 | «integer» 


= То allow an element to grow (О means по, 1+ means yes) 


flex-shrink: 1 | «integer» 


& To allow an element to shrink (О means по, 1+ means yes) 


flex-basis: auto | «length» 


< То define an item's width, instead of the width property 


flex: © 1 auto | «int» «int» «len» 


= Recommended shorthand for flex-grow, -shrink, -basis. 


order: 0 | «integer»? 


< Controls order of items. -1 makes item first, 1 makes it last 
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i == 


г CSS Grid is a set of CSS properties for building 2-dimensional layouts 


=> The main idea behind CSS Grid is that we divide a container element into 
rows and columns that can be filled with its child elements 


< |n two-dimensional contexts, CSS Grid allows us to write less nested HTML 
and easier-to-read CSS 


< CSS Grid is not meant to replace flexbox! Instead, they work perfectly 
together. Need a 1D layout? Use flexbox. Need a 2D layout? Use CSS Grid. 


tas 


BASIC CSS GRID TERMINOLOGY 


COLUMN 
AXIS 


ROW AXIS 


display: grid 


Grid track/row 


COLUMN Grid lines 


AXIS С А 


Gutters (gaps) 


Grid track/column Grid cell (might be 
filled by a grid item 


> or not) 


ROW AXIS 


grid-template-rows: <track size>x grid-column: <start line> / <end line> | span <number> 


grid-template-columns: «track size>x grid-row: «start line» / «end line» | span «number» 


г То establish the grid row and column tracks. One length unit & To place a grid item into a specific cell, based on line numbers. 
for each track. Any unit can be used, new fr fills unused space span keyword can be used to span an item across more cells 


row-gap: 0 | «length» justify-self: stretch | start | center | end 


| gap: © | «length» 


column-gap: © | «length» align-self: stretch | start | center | end 


< To create empty space between tracks < To overwrite justify-items /align-items for single items 


=> 
N 
о 
A 


E justify-items: stretch | start | center | end 


— 


align-items: stretch | start | center | end 


& To align items inside rows / columns (horizontally / vertically) Grid track/row 


Grid lines 


justify-content: start | start | center | end | Gutters (gaps) 


align-content: start | start | center | end | 


N 
TELLLLLELE "E 


о) 


Grid track/column Grid cell 


= То align entire grid inside grid container. Only applies if 


container is larger than the grid 
& This list of CSS Grid properties is not exhaustive, but enough to get started. 
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OVERVIEW OF WEB DESIGN AND 
WEBSITE PERSONALITIES 


HTML CSS 


Web designers create the overall look and feel of a website 
Web developers implement the design using HTML, CSS and JavaScript code 


| We'll take it 
We'll take it from here 
from here Brno ККЕ ЕЕЕ 


DEVELOPER USER 


DESIGNER 
DESIGNER + DEVELOPER 


Creates an immediate апа lasting good 
impression of the brand or product; 


Makes the user trust the brand right 
away; 


Increases the user's perceived value of the 
brand or product; 


Gives users exactly what they were 
looking for when coming to the site, e.g. 


purchasing a product or finding information. 


Makes users believe the brand doesn't 
really care about their product or service; 


Makes the user insecure about trusting 
the brand; 


Makes the brand or product seem 
“cheap”; 


Leaves users confused, and makes it 
hard to for them to reach their goal. 


ANYONE CAN LEARN GOOD DESIGN! 


Good web design Everyone can learn 
is not subjective 27 basics by following а 
or creative framework/system 
Distilled into Divided in 9 Rules will be 
100s of well- 
| l easy-to-learn and different areas of applied based on 
a нен easy-to-appl design: website 
deconstructed y РРУ 9": 


rules ingredients personality 


a Typography 
2 Colors 
e Images/lllustrations 
а Icons 

6 Shadows 


BLUEWAVE 


в Border-radius 
Join the solar energy 


revolution 
7 Whitespace 
а в Visual Hierarchy 


Solutions U E 6 
Our innovative community solar & project development solutions make se r X р е Fl e П С e 
solar possible for households, businesses, property owners, and more. 


Homeowners, businesses, and towns can enjoy 


^а Community Solar 
Breaking down barriers to solar benefits. - | + мар» | С О m ро П e n ts/ Layo ut 


savings by signing up for a community solar share. No 
rooftop panels required! 


ч) Design decisions for each 
ingredient are based on 
website personality 


0, Community Solar Project Services > 


You develop the project, let our team acquire 
and manage the customers. 


0, Community Solar Sales Partners > 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


NEWS 


OVERVIEW OF WEBSITE PERSONALITIES 
The Golden 


Center Apartments 
Serious/Elegant: For luxury and elegance, based on thin serif typefaces, зл о с 


who come as tourists, to relax and get to know the Croatian 
capital and all its attractions. 


golden or pastel colors, and big high-quality images 


t жа, + 
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Ка 


АРАЈ 


Location 


DISTANCE 


Onplace o © 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, Suid a better 
golden or pastel colors, and big high-quality images portfolio. 


your@email.com co 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


a е 


Timeless design Easily manage content 
Choose from a suite of professionally designed Onplace provides a focused, unbloated 
themes to present your work clearly. Clean lines and administration panel for your site. No other hosted 
readability as standard. portfolio is easier to keep updated. 
E +2: c 
So fast you'll never notice Mobile out of the box Automatic dark mode 
We optimise and deliver with a custom СОМ Your content adapts beatifully to tablets and Every theme comes with the ability to match your or 
designed for high performance and stunning crisp smartphone devices. Content loads swiftly with your visitors preference and display as light or dark 
visuals. mobile optimised assets. variants. 
еге © < © 8 опр!асе.арр с, оп + 
Close Hubble Daily Lenses 


Hubble is a new brand of contact lenses founded to 
offer you the high quality, affordable lenses you 


deserve. 


Why is it so hard to find affordable contact lenses? 
In the US and Canada, four manufacturers control 
about 95% of the contact lens market. Without 


much competition, they've set prices to be much 


higher than they should. 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 


HH Microsoft Microso ft365 Office Windows Surface Xbox Deals Support 


" ® 
ми СА 
Choose your Shop Surface Buy Xbox games 
Microsoft 365 devices and consoles 
D 
Bundle and save up to $460 Surface Laptop 3 
Complete your Surface Pro 7 with choice of Express yourself powerfully with a thin, light, 
select Type Cover. and elegant design, faster performance, and 


Shop я up to 11.5 hours battery Ше. 
Shop now > 


Black History Month 


Discover games, movies, and TV selected by Black communities at Microsoft 
Visit aka.ms/xbhm to learn about contributions and more. 


Browse games > Browse movies & ТУ > 


For business 


Microsoft 365 for business 


No matter what you do, there's a Surface to Stay a step ahead with powerful apps for 
help you do it. productivity, connection, and security. 
Shop now > Shop now > 


Surface for Business 


All Microso ft Search Cart X Sign in 


Winter Sale 


О 
Now's your chance to save 
Get after your goals with deals on Surface devices. For help choosing the right 


Surface, book a personal shopping appointment with a Microsoft Store 
associate. 


нш 
um H ЕЯ 
Shop Windows Find your next PC Shop Business 
10 


(a) w 


GAME PASS - e 
ULTIMATE ai 
Xbox Game Pass Ultimate Microsoft 365 
Xbox Live Gold and over 100 high-quality Premium Office apps, extra cloud storage, 
console and PC games. Play together with advanced security, and more—all in one 
friends and discover your next favorite convenient subscription. 
game. 
For up to 6 people > For 1 person > 
Join now > Compare all plans > 


= WATCHDOGS 2 


v 
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Pur 


Microsoft Teams Free business consultation 

Our product experts are available to assess 
your needs and make recommendations for 
your business. 


Chat, meet, call, and collaborate. 


Learn more > 


Learn more > 


El endplan Why Endplan For Employers ecuri 


OVERVIEW OF WEBSITE PERSONALITIES 


Manage all of your 
DeFi, Fiat + Real 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 


1 "m n assets from a single 
golden or pastel colors, and big high-quality images | 9 
platform. 
2 Minimalist/Simple: Focusses оп the essential text content, using small or Pe 
medium-sized sans-serif black text, lines, and few images and icons 
3 Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 
Be the portfolio manager покажа 
- : | | | you always wanted with dos rc 
A Bold/Confident: Makes an impact, by featuring big and bold typography, superior tools, tracking and eorom pati ny in^ 


real estate, Will, insurance, collectibles and 


paired with confident use of big and bright colored blocks community. "uu 


Defi, documents & 
real assets in one 
place 


Map, valuations and community ideas to help you grow 
your wealth. 


Why Endplan » 


Yy B 


Assets Documents 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 


Bold/Confident: Makes an impact, by featuring big and bold typography, 
paired with confident use of big and bright colored blocks 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching images/illustrations 


octave Therapy Virtual Coaching Groups Insurance Resources Locations v 


this time. 


We are in this together. 


Octave is a musical term, referring to a complete 
collection of musical notes. Similarly, our 
offering is a complete set of services to support a 
range of needs, preferences, and price points. 


We have assembled a talented team of clinicians, 
coaches, instructors, designers, and technologists 
to help guide you on your journey wherever you 
are, and provide a world-class experience along 


the way. 


In light of COVID-19, we now offer virtual 


therapy for new and existing clients. Check out 
our Virtual FAQs page for more information on 


the cost of virtual care. 


e 
- Аһ. 


Personalized Guidance 


We match you with the right provider and 
service to meet your needs, your schedule, and 
your price point. 


Why Octave? 


. + 
Mat 
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Quality & Results Focused 


We hire outstanding therapists & coaches who 
are compassionate, honest, and focused on 
measurable change. 


Come as you are. 


Supporting your emotional well-being through 
specialized therapy, goals-based coaching, and 
skills-based workshops, all offered virtually at 


Book a Free Consultation 


EP / n 


Supportive Community 


We believe that everyone needs a connected 
place where they can improve their emotional 
well-being and create lasting change. 


Log in 


Capsule Features ~ Pricing Integrations v Solutions v Blog Support Log in 


The smart simple = = = = 
1 $ 0 $ 

online CRM x Ap RES ES е 

Build stronger customer relationships, make © " o 2 


more sales and save time. 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 


medium-sized sans-serif black text, lines, and few images and icons наны ы 


* t 


Plain/Neutral: Design that gets out of the way by using neutral and small — снн Win more sales 
typefaces, and a very structured layout. Common in big corporations messes ay pet a nd tn 3 


Bold/Confident: Makes ап impact, by featuring big and bold typography, y е 
N 4 


paired with confident use of big and bright colored blocks See the big picture Keep your data safe A 


to help with any query!” 


Make more informed business decisions as Enjoy peace of mind knowing that your 

you easily spot the activities having the most information is safe with our easy-to-use Sian Carter 
impact on your sales figures with our security features, including Two Factor 

insightful reports. Authentication and user permissions 

Advanced Reporting > Security € Permissions > 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching images/illustrations 


Connect Capsule to your favorite applications 


Capsule works seamlessly with popular applications such as G Suite, Mailchimp, Xero and 


many more. 


Startup/Upbeat: Widely used in startups, featuring medium-sized sans- 
serif typefaces, light-grey text and backgrounds, and rounded elements Q полетио G Suite ем” — 


cloud accounting 


O quickbooks za pier Угеездеп! W) 


щ 


View ай integrations > 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 


Bold/Confident: Makes an impact, by featuring big and bold typography, 
paired with confident use of big and bright colored blocks 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching images/illustrations 


Startup/Upbeat: Widely used in startups, featuring medium-sized sans- 
serif typefaces, light-grey text and backgrounds, and rounded elements 


Playful/Fun: Colorful and round designs, fueled by creative elements like 
hand-drawn icons or illustrations, animations, and fun language 


© Khan Academy 


Donate Login Sign up 


For every student, 
every classroom. 
Real results. 


We're a nonprofit with the mission to provide a free, world-class 


education for anyone, anywhere. 


ZN EA | = 
vis ШІ С 
IN d 

Personalized learning Trusted content Tools to empower teachers 
Students practice at their own pace, first Created by experts, Khan Academy's library With Khan Academy, teachers can identify 
filling in gaps in their understanding and of trusted practice and lessons covers math, gaps in their students' understanding, tailor 
then accelerating their learning. science, and more. Always free for learners instruction, and meet the needs of every 

and teachers. student. 

TEACHERS 
Differentiate yo 


classroom and engage 
every student. 


We empower teachers to support their entire classroom. 
9096 of US teachers who have used Khan Academy have 


found us effective. 


INN 39NASIO 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES +1: 
TYPOGRAPHY 


HTML 


ЕЕ 
Typography is Ше art and technique 


of arranging type to make written 
language legible, readable and appealing 


when displayed. 
— Wikipedia 


SOME CONCEPTS FIRST... 


SERIF VS SANS-SERIF 


a Serifs 


Text 


Serif typeface 


> Creates a traditional/ 
classic look and feel 


2- Conveys trustworthiness 


+ Good for long text 


Text 


Sans-serif typeface 


^ Modern look and feel 


^ Clean and simple 


Easier to choose for 
beginner designer! 


LUXURIOUS and 
CONTEMPORARY APPEAL 
— for EVERY WOMAN 


Greenlight makes it easy to leave 
feedback on any website. 


Add to Chrome 


Inter 

Open Sans 
Roboto 
Montserrat 
Work Sans 


Lato 


Ф Use only good and popular typefaces and play ії safe 


Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 


Almost before we knew it, we had left the ground. 


Almost before we knew it, we had left the ground. 


X TOOLBOX 


AB Google Fonts 


FONT 
All tools are listed D 
on my resources 


page at jonas.io 


Merriweather 
Aleo 

Playfair Display 
Cormorant 
Cardo 


Lora 


Әр Use only good апа popular typefaces апа play її safe 


Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 


Almost before we knew it, we had left the ground. 


X TOOLBOX 


AB Google Fonts 


FONT 
All tools are listed D 
on my resources 


page at jonas.io 


@ Use only good and popular typefaces and play її safe 
e It's okay to use just one typeface per page! If you want more, limit to 2 typefaces. 


e Choose the right typeface according to your website personality: 


г Choose the right personality for your website (more on this later) 
г Decide between а serif and sans-serif typeface 


+ Experiment with all the "good" typefaces (and other typefaces from Google Fonts!) to see 
which ones best fits your website's message (this will come with experience) 


г You can keep trying different typefaces as you design and build the page 


When choosing font-sizes, limit choices! Use a 
“type scale” tool or other pre-defined range 


10px 
12px 
14px 
16px 
18px 
20px 
24px 
30px 
36px 
44px 
52рх 
62рх 
74рх 
86рх 
98px 


Adapted from a Minor 
Third (1.2) type scale 
with base 10px 


When choosing font-sizes, limit choices! Use a 
“type scale” tool or other pre-defined range 


Use a font size between 16px and 32px for 
“normal” text 


For long text (like a blog post), try a size of 
20px or even bigger 


For headlines, you can go really big (50px+) 
and bold (600+), depending on personality 


For any text, don't use a font weight 
under 400 (regular) 


Build your recruitin 
engine with Dover. 


No more juggling recruiting tools—Dover finds and schedules candidates you actually 
want to talk to, at a fraction of the cost. 


Join the 100+ companies relying 


ЕУІ on Dover to find the best talent 


20px “ 


Then, our system evaluates prospective can 


We discover 


candidates you 


actually want to 


talk to. 


V 
understand your requirements. 


; e 
on 50+ data points so we can find qualified 


uses a robust calibration process to deeply 


didates 


£ 


e 


Glassmorphism in user 
interfaces 


Another year, another UI trend is becoming increasingly popular 
among designers. Do you know it yet? 


я . | | А 
9 Michal Malewicz Nov 22, 2020 - 8 min read ж Г] [.] өөө 


ast year I unintentionally started the craze around Neumorphism, 

but as I predicted then, it didn’t really take over the design scene. In 
that very first article, I also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that year :-) С 65-72 chars | 


9 Use less than 75 characters per line 


Glassmorphism in user interfaces ша 


Another year, another UI trend is becoming increasingly popular among designers. Do you know it yet? 


AN... | | 4 
9 Michal Malewicz Nov 22, 2020 · 8 тіп read ж г) A өөө 


ast year I unintentionally started the craze around Neumorphism, but as I predicted then, it didn’t really take 
L, over the design scene. In that very first article, I also mentioned all the potential accessibility problems this style 


faces, which hopefully helped all the other articles raising accessibility issues that year | 95-112 chars | 


9 Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


& The smaller or longer the text, the larger the line 
height needs to bel 
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Glassmorphism in user BN 
interfaces 


Another year, another Ul trend is becoming increasingly popular 


among designers. Do you know it yet? 
a 
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ast year І unintentionally started the craze around Neumorphism, 


but as I predicted then, it didn't really take over the design scene. In 
that very first article, 1 also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that year :-) Ec 


Glassmorphism in user (as 
interfaces 


Another year, another Ul trend is becoming increasingly popular 


among designers. Do you know it yet? к= 


е . | | Е 
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ЈЕ ast year I unintentionally started the craze around Neumorphism, 


but as I predicted then, it didn’t really take over the design scene. In 


that very first article, I also mentioned all the potential accessibility 


problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that year :-) EN 


CREATE А GOOD READING EXPERIENCE 


10 


11 


Use less than 75 characters per line 2 


For normal-sized text, use а line height 
between 1.5 and 2. For big text, go below 1.5 
в The smaller or longer the text, the larger the line 


height needs to be! 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) 


Manage all of your 
DeFi, Fiat + Real 
assets from a single 


platform. 


Get Early Access › 


Manage all of your 
DeFi, Fiat + Real 
assets from a single 


platform. 


Get Early Access › 


Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


8 The smaller or longer the text, the larger the line 


height needs to be! 


Decrease letter spacing іп headlines, if it looks 
unnatural (this will come from experience) 


Experiment with all caps for short titles. Make 
them small and bold and increase letter-spacing 


HAPPINESS GUARANTEE = 
Love it, or it'S on us. 


Here's why we know you will. 


М, 


$ 
2 


Try Feals risk-free 


Free shipping and free returns. 


No fuzzy haze 


Feel better and keep a clear head. 


All natural ingredients 


Grown with care by US farmers. 


Happiness Guarantee M 
Love it, or it'S on us. 


Here's why we know you will. 


м, 


У, 
2 


Try Feals risk-free 


Free shipping and free returns. 


No fuzzy haze 


Feel better and keep a clear head. 


All natural ingredients 


Grown with care by US farmers. 


Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


The smaller or longer the text, the larger the line 
height needs to ре! 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) 


Experiment with all caps for short titles. Make 
them small and bold and decrease letter-spacing 


Usually, don't justify text 


= 


Glassmorphism in user 
interfaces 


Another year, another Ul trend is becoming increasingly popular 
among designers. Do you know it yet? 
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ast year I unintentionally started the craze around Neumorphism, 
but as I predicted then, it didn’t really take over the design scene. In 


that very first article, I also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that year :-) 


Glassmorphism in user 
interfaces 


Another year, another UI trend is becoming increasingly popular 
among designers. Do you know it yet? 
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ast year I unintentionally started the craze around Neumorphism, 


but as I predicted then, it didn’t really take over the design scene. In 


that very first article, I also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 
raising accessibility issues that year :-) 


Sure — there were some apps and products done in this style, but most 
notable, widespread uses were in some Samsung ads and in the MKBHD 
intro video. So not any full products, but rather smaller elements which 
proves my thesis that this style can work if used scarcely and if the objects 
on these backgrounds still hold their structure and readability without the 


decoration. 


Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


The smaller or longer the text, the larger the line 
height needs to be! 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) 


Experiment with all caps for short titles. Make 
them small and bold and decrease letter-spacing 


Usually, don't justify text 


Don't center long text blocks. Small blocks are fine 


Know what's 
trending 


of teams reported making changes to their support in 2020, 
and 75% said the coronavirus pandemic accelerated adoption 
of new digital technologies. 


The ripples of a more distributed world will only spread farther 
in 2021. To help you keep up, we identified the top five 
customer service trends in our 2021 Zendesk Customer 
Experience Trends Report. Learn how to adapt to a changed 
world without sacrificing top-tier customer support. 


See the trends 


Know what's 
trending 


Last year shook up businesses large and small. Customers 
now expect more—and companies are trying to catch up. 85% 
of teams reported making changes to their support in 2020, 
and 75% said the coronavirus pandemic accelerated adoption 
of new digital technologies. 


The ripples of a more distributed world will only spread farther 
in 2021. To help you keep up, we identified the top five 
customer service trends in our 2021 Zendesk Customer 

Experience Trends Report. Learn how to adapt to a changed 
world without sacrificing top-tier customer support. 


See the trends 
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SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 
WEB DESIGN RULES #2: COLORS 


HTML CSS 


@ Make the main color match your website's personality: colors convey meaning]! 


Red draws a lot of attention, and symbolizes power, passion, and excitement 


Orange is less aggressive, and conveys happiness, cheerfulness, and creativity 


Yellow means joy, brightness, and intelligence 


Greens represents harmony, nature, growth, and health 


Blue is associated with peace, trustworthiness, and professionalism 


Purple conveys wealth, wisdom, and magic 


Pink represents romance, care, and affection 


Brown is associated with nature, durability and comfort 


Black symbolizes power, elegance and minimalism, but also grief and sorrow 


@ Use a good color tone! Don't choose a random tone or CSS named colors. 


Red 

RED О RED 1 

# Т 4 e3 
RED 5 RED 6 

E 6b6t hi ? 
Pink 

PINKO PINK 1 


ufffaft Hf fdeeb 


PINK 5 PINK 6 

#T OE j #е6 )Bt 

Grape 

GRAPE 0 GRAPE 1 

итвтотс #f3d9fa 

GRAPE 5 GRAPE 6 
del 'be4bdb 

Violet 

VIOLET O VIOLET 1 

за! *e5dbf 


VIOLET 5 VIOLET 6 


#845ef #795072 


RED 2 


ff 


RED7 


PINK 2 


PINK 7 


GRAPE 2 


GRAPE 7 


VIOLET 2 


VIOLET 7 


PINK 8 


GRAPE 3 


#e599f 


GRAPE 8 


+ 


VIOLET 3 


VIOLET 8 


RED 9 


PINK 4 


GRAPE 4 


#да 


GRAPE 9 


PET 


VIOLET 4 


VIOLET 9 


#5f 


#2 


Indigo 


INDIGO O 


fedf2ff 


INDIGO 5 


Blue 


BLUE 5 


Cyan 


CYANO 


Teal 


TEAL O 


INDIGO 1 


#dbe4f 


INDIGO 6 


#4сбе! 


BLUE 1 


#ддеьт? 


BLUE 6 


CYAN 1 


CYAN 6 


TEAL 1 


a 


INDIGO 2 


t 


INDIGO 7 


1263е! 


BLUE 2 


BLUE 7 


CYAN 2 


TEAL 2 


TEAL 7 


INDIGO 3 


la7ff 


INDIGO 8 


BLUE3 


BLUE 8 


CYAN 3 


CYAN 8 


TEAL 3 


TEAL 8 


INDIGO 4 


#748ff 


INDIGO 9 


CYAN 4 


CYAN 9 


#8b 


TEAL4 


TEAL 9 


H0B7f5t 


Green 

GREEN O GREEN 1 GREEN 2 GREEN 3 GREEN 4 
Hebfbes #азт9ав 8527 ЈЕ # T; #69dt 
GREEN 5 GREEN 6 GREEN 7 GREEN 8 GREEN 9 
#5 766 #48сй57 4c #279е44 #258: 
Lime 

LIME O LIME 1 LIME 2 LIME 3 LIME 4 
#fafce te9facß #daf5a #c8 E fade 


LIME 5 LIME 6 LIME 7 LIME 8 LIME 9 
#944824 #82091 45816 #66a80f %5с9404 
Yellow 

YELLOW O YELLOW 1 YELLOW 2 YELLOW 3 YELLOW 4 
#fff9db #fff3bf #ffec99 #ГГедвв #ffd43b 
YELLOW 5 YELLOW 6 YELLOW 7 YELLOW 8 YELLOW 9 
#fcc419 #fab805 #f59faea #гавсай #067700 
Orange 

ORANGE 0 ORANGE ORANGE 2 ORANGE 3 ORANGE 4 
#fff4e6 #ffe8cc #f 8 %ҒҒс078 #ffa94d 


ORANGE 5 ORANGE 6 ORANGE 7 ORANGE 8 ORANGE 9 


#1f922b #fd7e14 1176707 не859дс #d9480f 


@ Make the main color match your website's personality: colors convey meaning]! 


“£ TOOLBOX 


- Open color 


CHOOSE THE RIGHT COLOR 


Gray 


colors 


Red 


colors 


Yellow 
colors 


Green 
colors 


Blue 
colors 


Indigo 


colors 


Purple 


colors 


Pink 
colors 


.coolGray 


. red 


.amber 


. emerald 


«blue 


«indigo 


. Violet 


.ріпк 


Make the main color match your website's personality: colors convey meaning]! 


Use a good color tone! Don't choose a random tone or CSS named colors. 


600 700 800 900 


50 100 200 300 400 500 
HF9FAFB #F3F4F6 #Е5Е7ЕВ #01050В #9CA3AF #6B7280 #4B5563 #374151 #1Е2937 #111827 


400 500 


50 100 200 300 600 700 800 900 
HFEF2F2 #ҒЕЕ2Е2 #FECACA #FCASAS #Е87171 HEF4444 #DC2626 ЯВ91СІС #991B1B H7FIDID 


50 100 200 300 400 500 600 700 800 900 
#FFFBEB #FEF3C7 #FDE68A #FCD34D #FBBF24 #F59E0B #097706 #B45309 #92400E #78350F 


50 100 200 300 400 500 600 700 800 900 
#ECFDF5 #О1ЕАЕ5 #A7F3D0 #6ЕЕ7В7 #340399 #10B981 #059669 #047857 #065F46 #064ЕЗВ 
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ж.” tailwindcss 


GREEN SEA NEPHRITIS BELIZE HOLE WISTERIA MIDNIGHT BLUE 


FLAT UI COLORS 2 


CARROT ALIZARIN CONCRETE 


e You need at least two types of colors in your color palette: a main color and a grey color 


a With more experience, you can add more colors: accent (secondary) colors (use a tool) 


We discover 
candidates you 
actually wantto 
talk to. 


Dover uses a robust calibration process to deeply 
i en 


understand your requirement 


COLOR 
PALETTE 


Then, our system evaluates prospective candidates 
on 50+ data points so we can find qualified 
candidates who are the best possible fits. 


@ You need at least two types of colors in your color palette: a main color and a grey color 
4 With more experience, you can add more colors: accent colors (use a tool) 


5 For diversity, create lighter and darker “versions” (tints and shades) 
“£ TOOLBOX 


MAIN ACCENT mu OC- Opencolor 


ж” tailwindcss 


TINTS 
("LIGHTER") 
COLOR 
PALETTE СЭ palleton.com 
COOULO(S 
SHADES 


Tint & Shade Generator 


(“DARKER”) 


WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


© Narrative Bl Product Why Narrative BI? About Y yousign Product Use cases v АР! Pricing Electronic signature v Resources v 


© Operations 
о о 
Meaningful Insig hts You should expect revenue increase by 


55% in the next three months as a result of 


Without the Click of a a new customer acquisition model. 
Button. 


Narrative Bl is a new user-friendly tool that 


The simpler way of 


o 
uses proprietary anomaly detection technology Sayl ng 
to bring meaningful insights to the user without 
а single click. Discover Yousign: the easy-to-use, legally binding eSignature solution for 
all your documents. 


Find out how it works in Europe or start your free 14-day trial to see it in 


action: 


WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


LATEST COLLECTION 


Love where you live, 
and who you live wit Autumn 


o 
Move-in ready homes and a built-in community | | Wiley 
/ y y 
so you can feel at home, together—wherever you are. { 


Earthy tones, knitted patterns 
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and metallic accents are what 
characterizes this Autumn 


Winter collection. 
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WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


hitchd Howitworks About Pricing 


Guests fund your 
| | honeymoon. 
A M L C О m p | | а П С = Risk: Very High | Ў pos The simple, modern, and meaningful way to fund your 

TM iH К ПЭНШЕ E. adventure of a lifetime. Your guests are going to love it. 
Technology 


Start your registry View sample registry 


Advanced KYC & KYT monitoring 


|. No credit card required 


Andre Jilderda 


Freelance front-end developer 


06 208 42 105 


mail@andrejilderda.nl 


LinkedIn 


Creating UI design takes time and effort, so get the most out of your design by 
handing off screens at the right time to the right people. 


Make the most of 
your shares 


We are a team of equity experts 100% focused on 
helping startup employees understand, maximize and 
unlock the value of their stock options and shares. 


design project 


Gets feedback from 
stakeholders. 


With Greenlight you can easily collate 


$33M 


Trackable revenue generated 


across our portfolio 


Developer-first 


Open-source SDKs with industry-leading 


accuracy, simple documentation, flexible APIs, 


and turnkey integrations. 


O 


Works everywhere, 
even when you need to 
log in. 


220% 


Average yearly growth rate across 
our clients 


із! 
тїт 
Extensible 


Build location-based experiences across the 
customer journey, from messaging to curbside 


pickup to address autocomplete. 


Share securily with 
team members. 


Greenlight makes sure that anything 


ДХ 


Increase іп client creative output 
on average 


u if 


Enterprise-ready 


Built for scale, processing 100B+ locations per 
year from 100M+ devices with enterprise-grade 


security, privacy, and support. 


Low minimums 


Order as few as 20 shirts to get your 
project started. 


Talk to a human 


Our team of apparel experts 
are always an email, phone 


call. or even а click амам. 


Use your main color to draw attention to the most important elements on the page 


Use colors to add interesting accents or make entire components or sections stand out 


Lightning fast delivery Money back guarantee 


Try our 2-day service and get your shirts Count on us being on time with each and 


by February 12 every order. 


Don't settle for 
custom shirts 
no one will 
wear. 


Your brand is too valuable to print 
оп scratchy, ill-fitting shirts that по 


one will wear. 


Real Thread's library of soft shirts, 
unique print options, and simple 
order process make it easier than 
ever to order shirts you'll love and 


wear proudly. 


Native mobile apps 


Beautiful native ¡OS & Android apps that 


jeliver a polished user experier 


SaaS applications 


Digital platforms 


Snappy digital platforms that balance 


ontent, nmerce, and functionality 


Let's team up and design 
something remarkable 


Our agile process supercharges your product design 


We've optimised it for collaboration over the course 


of 130* projects. Think of us as part of the team. Our 

projects move fast and involve rapid-prototyping and 
user testing. Expect new designs every few days. Joir 
us for workshops and sessions at our space in 


Amsterdam or from anywhere by video 
© Speed-up your product roadmap 


© Flexible workflow & fast communication 


© Remote or in-person sessions 


Getintouch > 


Your email address 


yst 


ture 


Design systems 


Enterprise software 


Design audits 


Aq Ck review 


> 
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n-depth analys 


f your 


Would you like to see Narrative 
Bl in action? 


Leave your email address to discuss how 
your company can get first actionable 


insights today 


WHY CHOOSE WEALTHFRONT? 


Meet Self-Driving Money™, 


We want to optimize your money across spending, 
savings, and investments, putting it all to work 
effortlessly. 

Deposit your paycheck with Wealthfront and, with the 


click of a button, you can have us automate the rest 
Our software can top off your emergency fund, pay all 
your bills, and even invest the rest to help meet your 


Emergency fund @ 


Home savings © 


goals. We call this future Self-Driving Money™. Long-term investments 2 


ез ~ 
Paycheck 


529 college plan @ 


Retirement © 


Essential 
All the basics to get started 


29€ [то 


Billed Monthly 


(2 5 Users 


Collaboration features 


AUTO-GENERATION 
(2 Unlimited generations 
(7) 1000 banner exports/month 


© 5 brand presets 


CREATIVE AUTOMATION 
(2) Unlimited templates 
(7) 2 000 API calls/month 


(2) Zapier integration 


Try for free 


POPULAR CHOICE 


в Use your main color to draw attention to the most important elements on Ше page 


e Use colors to add interesting accents or make entire components or sections stand out 


Advanced 


Perfect for agile teams 


79€ [mo 


Billed Monthly 


(2 15 Users 


(2 Collaboration features 


AUTO-GENERATION 
(2 Unlimited generations 
(2) 5 000 banner exports/month 


(2 50 brand presets 


CREATIVE AUTOMATION 
(2 Unlimited templates 
(7) 10 000 API calls/month 


(2 Zapier integration 


Try for free 


WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


7 Use colors to add interesting accents or make entire components or sections stand out 


The perfect pitch, 
Sax. every time. 


Compete 
against the 


Develop. 
Preview. 


Dover builds your company's brand and leverages it for all 


: | candidate communication. 
Nisha, Senior Software Engineer 


Then, we reach out to candidates as someone on your team. 


Saw that you worked at Facebook — Jason Candidates are 5x more likely to respond when they see a 
from our team worked there before joining us thoughtful note from a future teammate 

too! Г love to hear more about your work ' 
migrating your team to Typescript. It's actually 
on our roadmap for next quarter. 


COMPETITION WORKS 
What Activities Will You Offset? 


Neutralize your carbon footprint with the 


Competition has been scientifically proven 
to make you exercise up to 90% more. 


2016 University of Pennsylvania Study 


Cloverly API 


Try Cloverly 


Colorants or 
Synthetic Fillers 


We're not about 
pseudoscience and half- 


truths 

From D3 to Ome 
genetics to make а 1 
Meet our best sellers. 


Multivitamin for Women 18+ 


The Prenata | Multivitamin 


Multivitamin for Men 18+ 


Multivitamin for Kids 4+ КС 


Audacious 


smashed. 


From marketing strategy and leadership 


Matter Made produces reliable growth. 


в Use your main color to draw attention to the most important elements on Ше page 


e Use colors to add interesting accents or make entire components or sections stand out 


e You can try to use your color strategically in images and illustrations 


Global fertility benefits for 
employers that save money 
and tame anxiety 


1) + 


For the latest from our Carrot experts on COVID-19 and fertility, please visit our resource center — 


A customizable 
solution to fit every 


COLORS AND TYPOGRAPHY 


Ө On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text 


Defi, documents & Defi, documents & 
real assets in one real assets in one 
place place 


Map, valuations and community ideas to help you grow 


Map, valuations and community ideas to help you grow 
your wealth. 


your wealth. 


Why Endplan > 


Finance your 
marketing marketing 

ay for your marketing campaigns (i.e 
аа en a card. For a 


small fee, you can repay after 60 days or 
extend payments for another 60 after that. 


Finance your 


Pay for your marketing campaigns (i.e 
Facebook, Google) with a Settle card. For a 
small fee, you can repay after 60 days or 
extend payments for another 60 after that. 


КЕ On dark colored backgrounds, try to use a tint of the background (“lighter version”) Тог text 


e 


Make the right hires, faster with the 
world's leading talent acquisition ° 
software 


AUTOMATE 


Make the best hire, 
in half the time 


FIND EVALUATE 


Find and attract Move the right 
candidates applicants forward 


Fill your pipeline quickly with one-click job Easily collaborate with hiring teams to Move faster on a platform that automates 


posting to 200+ sites, Al-powered sourcing, evaluate applicants, gather feedback and process and manual tasks, like scheduling 


employee referrals and more. decide who’s best, all in one system. interviews and getting approvals. 


LEARN MORE > LEARN MORE > LEARN MORE > 


Own your health. 
Advance medicine. 


See your entire health history—at a glance. Contribute to 
medical research—anonymously and securely. 


» Get My Records 


a 


то Text should usually not be completely black. Lighten if ир it looks heavy апа uninviting 


Make the right hires, faster with the 
world's leading talent acquisition » 
software 


AUTOMATE 


Make the best hire, 
in half the time 


FIND EVALUATE 


Find and attract Move the right 
candidates applicants forward 


Fill your pipeline quickly with one-click job Easily collaborate with hiring teams to Move faster on a platform that automates 


posting to 200+ sites, Al-powered sourcing, evaluate applicants, gather feedback and process and manual tasks, like scheduling 


employee referrals and more. decide who's best, all in one system. interviews and getting approvals. 


LEARN MORE > LEARN MORE > LEARN MORE > 


Own your health. 
Advance medicine. 


See your entire health history—at a glance. Contribute to 
medical research—anonymously and securely. 


» Get My Records 


COLORS AND TYPOGRAPHY 


On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text 
Text should usually not be completely black. Lighten it up it looks heavy and uninviting 


Don't make text too light! Use a tool to check contrast between text and background colors 


що 


ә Contrast ratio needs to be at least 4.5:1 for normal text and 3:1 for large text (18px+) СООКОГ5 


A better way to grow your ey 
creative business 


Zibbet exists to help artists, makers and creative entrepreneurs 


13:1 2.9:1 


Zibbet exists to help artists, makers and creative entrepreneurs 
sell more. Now you can list a product once, sell it everywhere 
and grow your sales faster. 


sell more. Now you can list a product once, sell it everywhere 
and grow your sales faster. 


INN 39NASIO 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #5: IMAGES 
AND ILLUSTRATIONS 


HTML CSS 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


Your medications have arrived 


01 02 05 


Carrot Rx - — 


A single source for fertility medications — 
with free delivery and up to 60% savings. 
Exceptional care and personalized 
support every step of the way. 


"d ~ 
Learn more 
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We're in this together 


Medicine 


Create your 
own beautiful Mario Castillo ШО 


photo journal. - ee 


Capture every 
day of your year 
1,810 Photos in one single photo. 


© August 2019 


® 
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» 
- el 12 13 14 15 16 
т, 


Try not to miss a day 3—7 
to keep your streak up. 


Discover Your Strength 


"в 


veles 
All-Purpose cleaner 


hen 


and 


Feed 
Stories 
Tutorials 
My Gears 
Shop 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


Let us do the heavy lifting 


Goal-Focused Coaching 


When you use our fulfillment services, we handle the labor-intensive logistical work One-on-one program offered virtually, focusing 


on targeted skills from cognitive behavioral 


Get ahead of by picking, packing, and shipping your orders while you focus on building your brand 


and connecting with your customers. 


therapy and mindfulness to help you move past 


the curve 


The Zendesk Benchmark allows organizations to measure their 


challenges and create actionable goals. This can 
be a less expensive, effective alternative to 


therapy, or can serve to supplement therapy. 


Find a Coach 


customer support performance against their peers. Think of it 
as a friendly competition. It isn’t a survey or an expert opinion— 
#5 the single best data index based on actual customer 


support interactions from more than 90,000 companies 


using Zendesk. 


' 


3 , 
x’ 


ч Start fulfillment 


5 


" Anyone, 
anywhere, can 
start a business 


Enter your email address 


Start free trial 


Try Shopify free for 14 days, no credit card required. By entering your 
email, you agree to receive marketing emails from Shopify. 


i 


ES Why Carrot? For employers For consultants For health plans Company ~ 


Global fertility benefits for 
employers that save money 
and tame anxiety 


Request a demo 


For the latest from our Carrot experts on COVID-19 and fertility, please visit our resource center —> 


¿A 


A customizable 
solution to fit every 
company 

Whether you're a startup or a global corporation, 


Carrot can help you avoid nearly 70% of high- 
cost pregnancies with flexible plan designs. 


ОГ 44, 


e Different types of images: product photos, storytelling photos, illustrations, patterns 


About 


We're obsessed 
with growth 


Meet the team behind today’s fastest 
growing brands. 


Put the human 
back in HR. 


Your employees are the real stars. Show the 
love and help them perform! 


You don't have to 
play all the parts. 


Sales, accounting, HR— Oh My! You can't do it 
all - let Clerksy help. 


Employees come in all shapes and 
sizes. Find the right fit. 


astin jo 22 1-2 rksy handle contracts, any on set-conflicts and 
are complian is rka nis bir de 


e 
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What our clients 
say about us 


Communication and plan ner epared. The 
process went smoothly a nde ctly as described. 
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О Tech Entrepreneur 


@ Different types of images: product photos, storytelling photos, 


Automate Software 
Build and Testing 


Drone is a self-service Continuous Integration 


platform for busy development teams. 


GET STARTED DOCUMENTATION 
с 


Searching for locations 


Increase conversions by connecting customers with nearby places and 4 4 


things. { м ғ 
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Search and geocoding APIs ^ 4 4 Y 
4 tw ¿ 
Flexible and affordable geocoding, search, and {| 4 4 
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distance APIs with high-quality address and i i ~ 4 


place data. 


MIN o restaurant| 
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e cmm 


patterns 


Collaborate like 
never before 


Collaboration is king. Work on prototypes 


together using interaction libraries, and n 


| | lon wi «Бы... < 
communicate each interaction with 
intent using our recipes feature. 


Secure Cloud Project histories 
mp4 export Components 
Interaction libraries Interaction recipes 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


Join Khan Academy today 


Learners 


The customer experience Teachers 
is always right. 


| i - Parents 
Adobe Experience Cloud has everything your business needs to 
create an unparalleled customer experience. 


Discover Experience Cloud Give today 


2 Jade - Support 


“As usual, Capsule go over and beyond 


to help with any query!” 


Sian Carter 


Director of Operations at Ordoo 


From 


4 » Jess, CEO of Acme 


Not Ready to Jump 
in yet? Stay in | 
touch. m == | Веаду to get started? | | | Saw that you worked at Facebook — Jason 


from our team worked there before joining us 
Share your email address to receive the first 2 chapters of Beyond Coffee Aj | | І , too! Га love to hear more about your work 
pr y, | "^ migrating your team to Typescript. It's actually 
on our roadmap for next quarter. 


> Submit 1 | | i] 


To 
9 Nisha, Senior Software Engineer 
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USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


2 Use images to support your website's message and story. So only use relevant images! 


Built-in eraser Magnetic accessories USB C connectivity 


гапа cnarging 


Sit/Stand Desk 


How A Lack Of Sleep 
Kills Your Productivity 


Accessory Rail 


Built-in power 


Offset Your Carbon Footprint in Real Time 


Cloverly's powerful API calculates the impact of common carbon-intensive activities іп real time and uses 
verified, quality carbon offset projects to neutralize them. Ready to get started? Create an account to integrate 
the Cloverly АР! for free, or contact us for custom solutions 


INGREDIENTS THAT MATTER 


4 Organic, Plant-Based 
Ж ч) Superfoods 


42 % Our loyal companions deserve the best. That's why we've created 
treats with natural, certified -organic ingredients that are mindfully 
made in the U.S.A. 


LEARN MORE 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


2 Use images to support your website's message and story. So only use relevant images! 


"Being able to point to Trendmo and have our clients 
Champion their 
career 


Sama connects your employees to the 


instantly understand the value of our strategies has been a 


game-changer for our team." 


best professional coach for them. Built to 
seamlessly fit into your organisation, and Ann Thompson 
powered by sophisticated technology and 


our team of highly experienced coaches. 


Southbird Creative 


Book a demo 


Enabling breakthrough 
research. 


Want to be part of something bigger? PicnicHealth 
partners with some of the world's leading researchers to 
develop breakthroughs in medicine. 


By opting in to contribute anonymized medical data to 
research, you can join forces with thousands of others who 
are helping advance science. Because the more we know 
as a medical community, the more opportunity we have for 
discoveries that can change health for you, your loved 
ones, and people around the world. 


@ Different types of images: product photos, storytelling photos, illustrations, patterns 


@ Use images to support your website's message and story. So only use relevant images! 


e Prefer original images. If not possible, use original-looking stock images (not generic ones!) 


№ Solar Development № Solar Development 


We work at the forefront of responsible solar 
development. Partner with us to develop innovative 
utility-scale solar. 


Learn More 


B Developers and Property Owners > 


We work at the forefront of responsible solar 
development. Partner with us to develop innovative 
utility-scale solar. 


Learn More 


B Developers and Property Owners > 
Learn how our experienced team can deliver 
solutions that let you maximize the value of 
your land. 


Learn how our experienced team can deliver 


solutions that let you maximize the value of 
your land. 


KD PROFESSIONAL PHOTOGRAPHER - HIGH-QUALITY STOCK PHOTO 


@ Different types of images: product photos, storytelling photos, illustrations, patterns 


@ Use images to support your website's message and story. So only use relevant images! 


e Prefer original images. If not possible, use original-looking stock images (not generic ones!) 


№ Solar Development № Solar Development 


We work at the forefront of responsible solar We work at the forefront of responsible solar 


development. Partner with us to develop innovative development. Partner with us to develop innovative 


utility-scale solar. utility-scale solar. 


solutions that let you maximize the value of 


your land. 


solutions that let you maximize the value of 


your land. 


(D PROFESSIONAL PHOTOGRAPHER - HIGH-QUALITY STOCK PHOTO 


@ Different types of images: product photos, storytelling photos, illustrations, patterns 


@ Use images to support your website's message and story. So only use relevant images! 


e Prefer original images. If not possible, use original-looking stock images (not generic ones!) 


№ Solar Development № Solar Development 


We work at the forefront of responsible solar We work at the forefront of responsible solar 


development. Partner with us to develop innovative development. Partner with us to develop innovative 


utility-scale solar. utility-scale solar. 


solutions that let you maximize the value of 
your land. 


solutions that let you maximize the value of 
your land. 


KD PROFESSIONAL PHOTOGRAPHER m GENERIC-LOOKING STOCK PHOTO 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 
2 Use images to support your website's message and story. So only use relevant images! 


3 Prefer original images. If not possible, use original-looking stock images (not generic ones!) 
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ы Unsplash 


ma D Pexels 


Use images from 
here instead (for . 
free &) CB DrawKit 


unDraw 


USE IMAGES WELL 


4 Try to show real people to trigger user's emotions 


My roommates are my 
favorite people Гуе met 
since moving. 


Campaigns 


by Real Thread 


Raise money for 
‚your business 


- Small businesses are being hit hard by the Coronavirus. The country 


Emily 


Portland 


Bungalow made my move smooth and 
headache-free. It's a relief not to worry 
about fronting your roommates rent 
or utilities. 


Johnny 


New York 


Speak 
with us 


Need support? We are here to help. 
Click below to chat with us. 


E 
Log in now to see when your repair will be completed 


Quiet your mind and Ease your pain and Sleep tight and wake 
calm the storm. soothe your joints. up refreshed. 


See repair status 


USE IMAGES WELL 


д Try to show real people to trigger user's emotions 


5 If necessary, crop images to fit your message 


№ Solar Development 


We work at the forefront of responsible solar 
development. Partner with us to develop innovative 
utility-scale solar. 


Learn More 


В 


Developers and Property Owners > 


Learn how our experienced team can deliver 
solutions that let you maximize the value of 
your land. 


Acorns helps you 
grow your money 


Take control with all-in-one 
investment, retirement, checking and 
more. 


Ф Try to show real people to trigger user's emotions 
5 lf necessary, crop images to fit your message 


6 Experiment combining photos, illustrations and patterns 


For every student, 
every classroom. 
Real results. 


We're a nonprofit with the mission to provide a free, world-class 


education for anyone, anywhere. 


HANDLING TEXT ON IMAGES 


7 Method #1: Darker or brighten image (completely or partially, using a gradient) 


New year, New possibilities 


Invest in Yourself WW 
With a Wildist =  — 
Photography Workshop 


Get Started 


Solar for Financial or 17 Solar for Financial ог. 
Development Partners Solar For Property Owners | Оем | rs: 


HANDLING TEXT ON IMAGES 


7 Method #1: Darker or brighten image (completely or partially, using a gradient) 


8. Method Z2: Position text into neutral image area 


Order Online for Touchless Delivery 


on 
Raise money for 
your business 


Small businesses are being hit hard 
is on edge fro i i 


ШЕП Learnmore ~ 


Trust Is Worth 
More Than Gold 


> Semen 


Soul, electrified. | 


Die neuen Taycan Modelle. 


@ Method #1: Darker or brighten image (completely or partially, using a gradient) 


в Method #2: Position text into neutral image area 


9 Method #3: Put text in a box 


GET THE LATEST 
FROM THE WHITE 


HOUSE 
| Follow the White House on Facebook 2 
ө ө 
Огісіпа! | Follow the White House on Twitter A 
Masterpiece 
а nun ih a 
BOP showhome - open Saturdays and Sundays 12-4 pm _. mm- 


View Showhome 


Let Us Fill Your 
Glass with Joy 


To account for high-res screens, make image dimensions 2x as big as their displayed size 
& Scale factor: Actual pixels the screen contains / Pixels 
represented on screen 


г On high-res screens, scale factor is 2x or even Зх, on “norma 
screens it’s just 1x (1 physical pixel = 1 design pixel) 


Design Discovery 

After learning about your goals, our dedicated 
team of interior designers distill your vision into 
various moodboards that represent your style 
preferences. 


3D Renderings 

Using measurements from the digital scan, we 
create photorealistic 3D renders of your future 
bathroom using the same technology as movie 
studios. 


Plans & Permits > 

Our architects meticulously craft each detail 
from overall layout to the height of your mirror. 
These electrical, plumbing, and tile layout 
drawings are submitted to your city for permit 
approval. 


Materials 

Our dedicated procurement team orders, 
inspects, warehouses, and coordinates delivery 
of your materials with your GC. 


Construction 

With your materials received in our warehouse, a 
fully licensed and reliable Made-Certified 
Contractor will finish construction on-time. 


|” 


a0 To account for high-res screens, make image dimensions 2x as big as their displayed size 


& Scale factor: Actual pixels the screen contains / Pixels 


represented on screen 


г On high-res screens, scale factor is 2x or even 3x, on "norma 


|” 


screens it's just 1x (1 physical pixel = 1 design pixel) 


Design Discovery 

After learning about your goals, our dedicated 
team of interior designers distill your vision into 
various moodboards that represent your style 
preferences. 


3D Renderings 

Using measurements from the digital scan, we 
create photorealistic 3D renders of your future 
bathroom using the same technology as movie 
studios. 


Plans 6 Permits > 

Our architects meticulously craft each detail 
from overall layout to the height of your mirror. 
These electrical, plumbing, and tile layout 
drawings are submitted to your city for permit 
approval. 


Materials 

Our dedicated procurement team orders, 
inspects, warehouses, and coordinates delivery 
of your materials with your GC. 


Construction 

With your materials received in our warehouse, a 
fully licensed and reliable Made-Certified 
Contractor will finish construction on-time. 


Blurry image on 
high-res screen 


(@1х 


SOME TECHNICAL DETAILS 


10 To account for high-res screens, make image dimensions 2x as big as their displayed size 
11 Compress images for a lower file size and better performance 


%7 TOOLBOX 


ы Unsplash 


D Pexels 
СЭ DrawKit 


unDraw 


С) Squoosh 


А 
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SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 
WEB DESIGN RULES #4: ICONS 


HTML 


@ Use a good icon pack, there are tons of free and paid icons packs 


© Regular v Q Search #000000 


Explore 
N- d ees Bs 52 LJ) Countries 
Mii е” ME шы Community 
З? Dating 
O po Do = 5 a Forum 


ші Open Startup 


{0 + - e C [ка| “7 Vote on photos 
align-center-vertical anchor android-logo sperture spple-logi ЕЕ 


FIRE calculator 


Canggu shortcut cam 


Фф J < => ШІ Fastest growing 


8 Escape the winter 


P Phosphor icons © You can just use 
emojis too 


“£ TOOLBOX 


ІСОМ58 


апа тапу, тапу тоге... 


Ш 


My product is hard to use 


Let's flatten the learning curve. 


= 


My product has design debt 


Let's rethink and create a design system. 


A 


My MVP lacks polish 


Let's make it look and work amazing. 


Е: 


My арр and site don't get along 


Let's make your user journey sing. 


e Use a good icon pack, there are tons of free and paid icons packs 


е Use only one icon pack. Don't mix icons from different icon packs 


я СТЕ This icon has a 
at 


completely different 
My users' productivity is low style: filled a nd 
Let's get rid of repetitive tasks. boxy/sq uared 


OO 
ФА 
My product has feature creep 


Let's kill your darlings. 


@ Use a good icon pack, there are tons of free and paid icons packs 
@ Use only one icon pack. Don't mix icons from different icon packs 


e Use SVG icons or icon fonts. Don't use bitmap image formats (.jpg and .png)! 


55 T 
S | S 
| VECTOR-BASED | 


= "Regular images”: JPG, PNG, GIF =" SVG images and icon fonts 


=> Do not scale, become unsharp! < Scale indefinitely! 


Use a good icon pack, there are tons of free апа paid icons packs 


Use only one icon pack. Don't mix icons from different icon packs 


Use SVG icons or icon fonts. Don't use bitmap image formats (.jpg and .png)! 


Adjust to website personality! Roundness, weight and filled/outlined depend on typography 


Secure 


Safeguard your agreements 


Legally binding 


Time-stamped proof file 


Hosted in the EU 
GDPR and elDAS compliant 


HAPPINESS GUARANTEE 


Love it, or it's on us. 


Try Feals risk-free 
No fuzzy haze 


All natural ingredients 


Trust our team of 
experts to deliver 


zn 


Design consultants 

Our team can help you create your 
FF&E specification, keeping it on time 
and in budget. 


Installation 

On-site installation including 
assembly, positioning, snagging and 
packaging removal. 


One point of contact 


You have one point of contact — us. 
We'll handle every supplier and all 
the admin. 


Consolidated delivery 


We'll consolidate orders from multiple 
suppliers and deliver when required. 


WHEN TO USE ICONS 


5 Use icons to provide visual assistance to text 


Traditional multivitamins weren't doing us any favors, so we made one that will. 238 М 900% "m x 
| : Easil k 
à кл asily make notes оп 
ackable revenue generated Average yearly growth rate across Increase in client creative output 
c» Sp $) (2) О across our portfolio our clients on average 
| | я your documents 
Traceable Vegan Friendly Gluten and Major Non-GMO No Artificial 


Nutrients Allergen Free Colorants or 
Synthetic Fillers 


- ы ну, еее 
x ntt 
= 


a 


Drag and drop file transfer 


ЈЕ] (LLI Glacier Discovery - Readable in sunlight 


30 LIFE-CHANGING 3 GUIDED STAGES OF SIGNATURE CHECK-IN —]Al-vear < э ~ 3 hrs 10,490 PDF PDF and ebook (ePub) support 
EXERCISES SELF-DISCOVERY TOOL 
BASED ON SCIENTIFIC DESIGNED AND BUILT OVER 500+ FIVE-STAR 
RESEARCH FOR BEGINNERS REVIEWS 20 000 
? 
COMPANIES 
Share 
information 
Based on data from: 1 ‚300,000 


HIRES 


Es] 


Brainstorm Solve a 
ideas problem 


5.5В ae 486M ^Y 1.05M 140 
im TICKETS = CUSTOMERS ©. 4 AGENTS 9 COUNTRIES $5,000,000 


CANDIDATES 


= 


Private bedrooms 


From master suites to private bedrooms, your 


room is yours alone. 


©) 


Easy transfers 


Moving cities? Just give us a 30-day notice and 


we're here to help. 


Gets feedback from 
stakeholders. 


With Greenlight you can easily collate 
feedback from those who matter on 
the product version that your users 
will see. 


zr 


Furnished spaces 


No more Craigslist sofas. Common areas come 


furnished, on us. 


m 


Flexible leasing 


We offer 4-18 months leases, because life is 


crazy and things change. 


O 


Works everywhere, 
even when you need to 


log in. 


It easily integrates with your 
workflow, without the need for any 
code or website iterations 


6 Use icons for product feature blocks 


z 


Regular cleaning 


Professional monthly cleaners to keep your spot 


spick and span. 


Lightning fast wifi 


Pre-installed WiFi networks mean you're ready 


to connect on day one. 


Share securily with 
team members. 


Greenlight makes sure that anything 
behind a login is protected and your 


access design and security 
architecture stay the same 


5 Use icons to provide visual assistance to text 


:,: 


Close to the metal 


From direct integrations with 
card networks and banks to 
checkout flows in the browser, 
we operate on and optimize at 
every level of ће financial stack. 


Developer-first 


Open-source SDKs with industry-leading 


accuracy, simple documentation, flexible APIs, 


and turnkey integrations. 


> 


Fastest-improving platform 


We release hundreds of features 
and improvements each year to 
help you stay ahead of industry 
shifts. (On average, we deploy 
our production API 16x per day.) 


" 


Extensible 


pickup to address autocomplete. 


Build location-based experiences across the 


(9 % 


Battle-tested reliability | Intelligent optimizations 


Our systems operate with Our machine learning models 


99.9%+ uptime and are highly train on billions of data points 
scalable and redundant. Stripe and help increase revenue 
is certified to the highest across conversion, fraud, 


compliance standards. revenue recovery, and more. 


at 


Enterprise-ready 


Built for scale, processing 100B+ locations per 


customer journey, from messaging to curbside year from 100M+ devices with enterprise-grade 


security, privacy, and support. 


ге) 


Low minimums 


Order as few as 20 shirts to get your 
project started. 


gr 


Lightning fast delivery 


Try our 2-day service and get your shirts 


by February 12 


Ey 


Money back guarantee 


Count on us being on time with each and 
every order. 


WHEN TO USE ICONS 


5 Use icons to provide visual assistance to text 


б Use icons for product feature blocks 


7 Use icons associated with actions, and label them (unless no space or icon is 100% clear) 


(>) Ouvir agora @ Downloads 


Explore за Explorar 


Courses Q Search 


Notifications (9) Radio 
m Let's get started READ MORE 
"^ 0- Tutorials өп Account 


Messages BIBLIOTECA 


C) Recentemente adicion... 


Bookmarks Pricing FF Licenses 
Æ Intérpretes 


/ 


Lists С) Albuns Instructor Myleanng (9 YE A 
T 


Follow us 


Profile Musicas 


f OO ova pj 


Use icons to provide visual assistance to text 


Use icons for product feature blocks 


Use icons associated with actions, and label them (unless no space or icon is 100% clear) 


Use icons as bullet points 


47. 
E 


Essential 
All the basics to get started 


29€ [mo 
Billed Monthly 


(2 5Users 


* Collaboration features 


AUTO-GENERATION 
(2) Unlimited generations 
(2) 1000 banner exports/month 


© 5 brand presets 


CREATIVE AUTOMATION 


(2 Unlimited templates 


(2) 2 000 API calls/month 


(2) Zapier integration 


POPULAR CHOICE 


Try for free 


X X X «NX 


Caffeine keeps you alert. [1] 
Coffee contains helpful antioxidants. [2] 


Anxiety: Caffeine increases the body's stress hormone 
(cortisol). [3] 


Sleeplessness: Excess caffeine decreases sleep quality, 
requiring even more caffeine the next day for the same 
alertness. [4] 


Harmful: Many energy drinks include harmful 
compounds like L-tyrosine and excessive amounts of 
sugar. [5] 


X Program Administration 


Blair handles all operational duties to facilitate the ISA 
program including the process of all applications, 
repayments and customer support. Lean back and focus 
on the education of your students. 

* Regulatory Framework 

+ Technical Infrastructure 


+ Financing Solutions 


We partner closely with you. 


w^ Dedicated support over Slack 
v ATS integrations 
v Strategy meetings to hone in the search 


w^ Scheduling management 
v Weekly performance reports 
w^ Consultation on job description and messaging 


IS] [9 Es] is) [S [s] [s] [s] 


Sustainable aluminum bottle 


Only clean and natural ingredients 


No petrochemicals 


Saves clean water 


Renewable active ingredients 


Made locally with minimal outsourcing 


Reduces greenhouse gas emissions 


Proven to perform 


E 
So fast you'll never notice 
We optimise and deliver with a custom CDN 


designed for high performance and stunning crisp 
visuals. 


V м 


Cost-effective 


At a fraction of the cost of traditional construction, 
our pre-fab solutions create additional space for 
focused work and collaboration without constant 
noise, debris and distraction. 


Inbox 
Starred 
Snoozed 
Important 
Sent 
Drafts 


Trash 


шт v uy O +» LI 


0 
Mobile out of the box 


Your content adapts beatifully to tablets and 
smartphone devices. Content loads swiftly with 
mobile optimised assets. 


Q) 
Time Saving 


Thoughtful design ensures simple installation in a 
few hours or less. And, because our products are 
safety ensured, you'll never have to spend time or 
money chasing after permits, contractors, and 
more. 


«C 
Automatic dark mode 


Every theme comes with the ability to match your or 
your visitors preference and display as light or dark 


variants. 


“ik 


Flexible 


Unlike traditional construction, our purpose-built 
products were designed to adapt with your 
workspace and can easily be positioned in various 
places throughout your office, or to an entirely 
new location. 


Earn interest 


0.40% AER, Easy Access Interest Pocket 
provided by Investec Bank, FSCS protected 


(Opt-in) 


Automated savings 


Our algorithm sets money aside little-but- 


often, and Round Ups save as you spend 


Lost Money 


Get alerts if you’re overpaying on bills, and 


switch to a cheaper supplier in seconds 


Unlimited withdrawals 
Withdraw as often and as much you like, 
with no hidden charges 


ря 


Keep it stupid 


I like to keep my work simple, 
minimal with eye-catching details 


and stunning typography. 


C 


Correctness 


Eliminate grammar, spelling, 
and punctuation errors. 


m 


Link Banks 
Connect up to 3 
banks and their 

accounts 


+ 


Manual 
Manually add 
spending for 

things like cash 


i 


Award-winner 


ПІ be a future game changer 


v 


Clarity 


concise and easy to follow. 


~ 
5 
Automatic 
Up-to-date 
transactions and 
balances 


2 


Dark Mode 
Automatically 
adjusts with 
brightness 


Make every sentence 


Not yet. But with a combination of 


winning attitude and high ambition 


A 
w 


Engagement 


[ар 


Spending 
Smart ways to 
look at your 
recent spending 


Y — 


y — 


Count 
Tap transactions 
to add up their 
amounts 


Find vivid words to enliven 
each and every message. 


9 To keep icons neutral, use same color as text. To draw more attention, use different color 


оде 


Keen to learn 


You know how to eat an elephant? 
Bite by bite. That's how | learn. One 
small thing. Every. Single. Day. 


Appropriate tone 


Choose the right tone and 
formality level. 


e, 4 


Insights Fast 
See your daily Open directly to 
average and spending 


monthly in & out information 


“ 2 


Notifications Private 


Get a weekly Keep info secure 


reminder to check with Touch ID or 


spending Face ID 


КЕ То keep icons neutral, use same color as text. То draw more attention, use different color 


Native mobile apps 


Beautiful native ¡OS 8 Android apps that 
deliver a polished user experience. 


Digital platforms 


Snappy digital platforms that balance 
content, commerce, and functionality. 


SaaS applications 


Feature-driven applications in the cloud 
that are optimised for self-service. 


208 


Design systems 


Future-proof your product with a design 
system that scales with your product. 


то Don't confuse your users: icons need to make sense and fit the text or action! 


? © 


Enterprise software 


Complex and robust software solutions 
that feel bespoke and intuitive. 


Design audits 


A quick review or in-depth analysis of your 
product. Let's optimise! 


А 
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WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES £5: 
SHADOWS 


HTML 


г After an era of 100% flat design, we're now back to using shadows in UI design (“flat design 2.0”) 


ail. Verizon 10:11 PM 9 100% = 


Tuesday MW = о 
= 3 ' ' x > 
11 Хал? 


Messages Calendar Photos Camera 
— 


Weather 


Reminders Stocks Game Center 


ве 


Passbook iTunes App Store 


Safari 


SKEUOMORPHIC 
DESIGN 


..... = 9:41 АМ 100% = 
Мопдау a ~ 
ө de С іше = 
Messages Calendar Photos Camera 
Е әз. NORMAL NORMAL 
" <> | 24 Suggested 
(280) icrosoft Pi мро 
: | PRESSED PRESSED pe 
Weather Clock ace 
ELS = ША Microsoft Teams 
Input tex| "m 
€ Weatt 
Reminders Stocks Game Center А [А] 
Permissions 
D Adobe Creative Cloud 
Lorem ipsum dolor sit amet, Ш Adobe ilustrator сс 2020 
consectetur adipisicing elit, sed ә Ш Adobe Lightroom cc 2020 
Newsstand iTunes Store AppStore Passbook — vane do eiusmod tempor incididunt... И Ш Adobe Photoshop cc 2020 
А а Mm. | Y] Alarms & Clock 
а = 9: BUTTON BUTTON Б 
© шу. T 
~ © m. 
е % | ў «шы Ey Calculator 
Compass Settings О сона 
O © С) 8 Туре һег rch 


e 


(MINIMAL) 


Still minimal, but brings 
back shadows and depth 
for better usability 


Office & Productivity 


Entertainment & Media 


Nick Singer Modern Homes 


€ ^» & 5 ш 9 ga ыш ш 


=> After an era of 100% flat design, we're now back to using shadows in UI design (“flat design 2.0”) 


< Shadow creates depth (3D): the more shadow, the further away from the interface the element is 


- UL 


SIDE 
VIEW 


3D VIEW 


=> Shadow сап be used 
on boxes and text 


DISTANCE FROM SCREEN / INTERFACE 


LATEST COLLECTION 


Autumn — 
Winer 
2020 


Earthy tones, knitted patterns 


mor БЕН 
a 


and metallic accents are what 
characterizes this Autumn 


Winter collection. 


LOOKBOOK › 


SERIOUS / ELEGANT 


@ You don't have to use shadows! Only use them if it makes sense for the website personality 


Why Limepay customers are almost twice as 
valuable for a merchant as traditional Buy 
Now Pay Later solutions. 


A Total Economic Impact™ Study Forrester 


Read the full study — 


a, Secure 'рау now' or 'pay it later' offering 


Li 
ігперау. 
Want to give customers the choice of conventional card payments, 
and flexible instalments - without sending them away to a third party site? 
e © ec Ou Now you oon 
Limepay's clever behind-the-scenes technology lets you own the payment 
thas of-the-art secure checkout that integrates seamlessly 
m nto your existing website. 


а, 532.48 


Eric Hoffman 


PLAYFUL / FUN 


@ You don't have to use shadows! Only use them if it makes sense for the website personality 


@ Use shadows in small doses: don't add shadows to every element! 


? 


Let's team up and design 
something remarkable Р 


Our agile process supercharges your product design. 
We ve optimised it for collaboration over the course 
of 130* projects. Think of us as part of the team. Our 
projects move fast and involve rapid-prototyping and 
user testing. Expect new designs every few days. Join 
us for workshops and sessions at our space in 
Amsterdam or from anywhere by video. 


e Speed-up your product roadmap 
e Flexible workflow & fast communication 


© Remote or in-person sessions 


Your email address Getintouch > 


Jurgen Ploeger 


Work 


Helped get stakeholder buy-in, for 
an EdTech platform through a new 
user experience and visual refresh, 
in 6 weeks 


1 would 100% recommend Heavyweight to anyone 
looking for a team to help with UX & UI. They uniquely 
were able to understand what we needed for our 
project - the degree of complexity required, meeting 
deadlines, and |...) budget. 

— 

Sam Green 


Co-founder 5 CEO of Turinglab 


Ways we can help 


IU 


My product is hard to use 
Let's flatten the learning curve. 


= 


My product has design debt 


Let's rethink and create a design system. 


9 


Му MVP lacks polish 


Let's make it look and work amazing. 


ЕВ 


My арр and site don't get along 
Let's make your user Journey sing. 


я т 


' Robin Humphreys 


ЯШ os 


7 


My users' productivity is low 


Let's get rid of repetitive tasks. 


go 
од 


My product has feature сгеер 
Let's КИ your darlings. 


Let’s team up and design 
something remarkable Р 


Our agile process supercharges your product design. 
We've optimised it for collaboration over the course 
of 130+ projects. Think of us as part of the team. Our 
projects move fast and involve rapid-prototyping and 
user testing. Expect new designs every few days. Join 
us for workshops and sessions at our space in 


Amsterdam or from anywhere by video. 


© Speed-up your product гоайтар 
© Flexible workflow & fast communication 


o Remote or in-person sessions 


Your email address Getintouch > 


Jurgen Ploeger 


Work 

Helped get stakeholder buy-in, for 
an EdTech platform through a new 
user experience and visual refresh, 
in 6 weeks 


I would 100% recommend Heavyweight to anyone 
looking for a team to help with UX & UI. They uniquely 
were able to understand what we needed tor our 
project - the degree of complexity required, meeting 
deadlines, and [... budget. 


Sam Green 
Co-founder 6 CEO of Turinglab 


Ways we can help 


Џ 


Му product is hard to use 


Let's flatten the learning curve. 


93 


My product has design debt 
Let's rethink and create a design system. 


9 


My MVP lacks polish 


Let s make it look and work amazing. 


ЕВ 


My арр and site don't get along 
Let s make your user journey sing. 


aT 
emm v 


Robin Humphreys 


# 


My users' productivity is low 


Let's get rid of repetitive tasks. 


по 
од 


My product has feature сгеер 
Let's kill your darlings. 


Go light on shadows, don't make them too dark! 


C e S ° 


Correctness Clarity Engagement Appropriate tone 
Eliminate grammar, spelling, Make every sentence Find vivid words to enliven Choose the right tone and 
and punctuation errors. concise and easy to follow. each and every message. formality level. 


Align Your Team With Your Company's Style 


With Grammarly Business, you can create a company style guide to keep 
every team member's communication clear and on-brand. 


о Staci, on the support team, resolving a customer's issue. 


Company Style Guide 
CHANGE FROM CHANGE TO DESCRIPTION 
We appreciate your business. Please rate our 
acme company > AcmeCo Use the official spellir К 
005 with this short survey. 
© ACMECO STYLE GUIDE 
users > customers The people whe 
QoS 2 quality of service 
Jamie Leigh > James Leigh Our CEO prefer: Most of our customers won't understand what this 
abbreviation means. 
Grammerly > Grammarly Common misspı 


You don't have to use shadows! Only use them if it makes sense for the website personality 


Use shadows in small doses: don't add shadows to every element! 


4 e 2 ° 


Correctness Clarity Engagement Appropriate tone 
Eliminate grammar, spelling, Make every sentence Find vivid words to enliven Choose the right tone and 
and punctuation errors. concise and easy to follow. each and every message. formality level. 


Align Your Team With Your Company’s Style 


With Grammarly Business, you can create a company style guide to keep 
every team member's communication clear and on-brand. 


о Staci, on ће support team, resolving а customer's issue. 


Company Style Guide 


CHANGE FROM CHANGE TO DESCRIPTION 
We appreciate your business. Please rate our 


асте со! > AcmeCo Use the official spell . В 
трапу | | QoS with this short survey. 


о ACMECO STYLE GUIDE 


customers The people wh 
QoS - quality of service 


Most of our customers won't understand what this 
abbreviation means. 


Jamie Leigh James Leigh Our CEO prefer 


Grammerly Grammarly Common missp 


Use small shadows for smaller elements that should stand out (to draw attention) 


Predictive Insights 


Using anomaly detection, Narrative Bl's proprietary 


algorithms generate meaningful insights for the user 


without the click of a button. Narrative Bl uses time-series 


& Christina - Support 


"As usual, Capsule go over and beyond 


to help with any query!" 


Sian Carter 


Director of Operations at Ordoo 


^ usadas ra-—— 
Geofences (> ork 
Narrative Bl speaks your language. Through our patent- = 
pending Natural Language Generation Engine, users сап 
Бо о 
receive insights described іп plain English. 9% 
Dashboard 


Your work email Learn more 


Enter your work email address Get a demo 


Configure geofences and visualize, 


analyze, and segment your location 
data 


ші 


accuracy 


А 


efficiency frequency 


SDK 


Open-source ¡OS, Android, and web 
SDKs that make adding location to 
your apps simple 


Everybody has a unique 
story to tell, and UGV 
allows you to do that, and 
it is still professional 
storytelling at the end of 
the day! 


Scott DeFillipo у 
AIG 


Seenit presents a huge 
opportunity for us, both for 
our employees and with 


Retail Banks Commercial the outside world 
| Banks 
La и nch you r | SA Lea rn More Make sure every transaction is 
compliant with our Advanced Our ultimate AML Compliance Laura Turkington 
KYC 8 KYT Technology Technology will make you Vodafone 


compliant with regulations 


USE SHADOWS IN THE RIGHT SITUATION 


4 Use small shadows for smaller elements that should stand out (to draw attention) 


5 Use medium-sized shadows for larger areas that should stand out a bit more 


© о 


| Powerful fraud protection | Compliance made easy 
Checkout uses machine learning to help you distinguish Qualify for the simplest method of PC! validation with a pre- 
fraudsters from customers. Apply extra authentication to filled SAQ A, and easily meet new regulatory requirements 
high-risk payments, or let us take on fraudulent disputes like Europe’s Strong Customer Authentication. " 5 +11• TE қ 
We've been filling positions a lot faster 
entirely with Chargeback Protection. 


because our managers are now involved 


М avarro red uces in the hiring process. So far we've made 


ti me to h | ге Бу 150 hires in 6 months and we've reduced 


our time to hire from 50 days to 26." 


Jason Lesher 
VP of Talent Acquisition, Navarro 


SEE MORE CUSTOMER STORIES > 


50% 


“Throughout my 20 years in e-commerce, checkouts were the 
last thing you wanted to touch and the first to go down. With 
Stripe Checkout we don't maintain this ourselves anymore. 1 


can't emphasize enough how big that is.” 


Bryan Mahoney, Co-Founder & CTO 


Forbes EH YRYANAIR moodle SEPHORA w @ bevi 


SOHO HOUSE JOEY RESTAURANTS 


ү Зз eM CES 11, drooc E 
arfa it със! 


s MY" от қ ж 


E. o о а ж га 


THE PARK 
CAMPER 


MEDIUM 10-DAY TOUR 


Breathing in Nature in America's most 


PRODUCTIVITY 


spectacular National Parks 
Why coaching should be 
available to every 

[О 4stops 2, 15 people employee 


$1497 DCI Jer Sol 
DETAILS 
4.6 rating (8) 


(9) Las Vegas, USA ЁЗ August 2021 


Published on January 12th, 2021 


A ACCORPLUS 


“As the most extensive travel, dining and 
lifestyle programme in Asia Pacific, we 
wanted а native payment solution that 
works for our brand. We wanted the 
ability to offer our members a full range 
of payment options without bouncing 
them to third party platforms and 
requiring them to sign up to other 
accounts - and Limepay delivers that 


perfectly”. 


Wayne Greenwood 
Vice President for the Pacific, Accor Plus 


“EB is always looking to innovate. With the 
demand for BNPL increasing, we want to 
offer our customers a way to engage 
directly with us when they transact. 
Limepay's white-label offering is unique 
and keeps customers on our site.” 

Shane Stockwell 

Senior Director, EB Games 


Read the story —> 


Use small shadows for smaller elements that should stand out (to draw attention) 


Use medium-sized shadows for larger areas that should stand out a bit more 


Why Workable Product » Customers Pricing Login 


Feeling Sexy 
С 4 


“We decided to implement Limepay to 
test the hypothesis we had developed 
and were astounded with the results. In 
our first four weeks with Limepay, we saw 
improved basket sizes by 12.5% and a 
reduced checkout abandonment rate of 
30%, growing our average daily revenues 
by over 18%.” 


Mia Hudson 
Director, Feeling Sexy 


Read the case study —> 


Use small shadows for smaller elements that should stand out (to draw attention) 


Use medium-sized shadows for larger areas that should stand out a bit more 


Use large shadows for elements that should really float above the interface 


your business. 


rn Contact sales > 


Deutsch 

English (United States) 
English (United Kingdom) 
Espanol (America Latina) 
Espanol (Espana) 
Francais (France) 
Francais (Canada) 


Bahasa Indonesia 


Italiano 
aps 
Portugués (Brasil) 
SARX 
Products 
| Payments 
$ Engish UntedStates) 0 | Billing 
Connect 
Payouts 


ment 


y Cl 
q | 
TJ 


SOLUTIONS COMPANY 


Community Solar » 
CS Project Services 


CS Sales Partners 


Solar Development › 
Property Owners 


Our Projects 


- 


ar developers, working to deliver savings to 


RESOURCES 


SOLAR DEVEL 


Open your bank account 
in just 5 


First Name 


Last Name 


Email Address 


Use small shadows for smaller elements that should stand out (to draw attention) 
Use medium-sized shadows for larger areas that should stand out a bit more 


Use large shadows for elements that should really float above the interface 


Experiment with changing shadows on mouse interaction (click and hover) 


LOGIN TO BOOK ӨТЕР LOG IN TO BOOK TOUR LOGIN TO BOOK TOUR 


u 


Medium-sized shadow "pulls" omaller shadow "pushes" D 


button closer to the user button back into the interface 


Use small shadows for smaller elements that should stand out (to draw attention) 
Use medium-sized shadows for larger areas that should stand out a bit more 

Use large shadows for elements that should really float above the interface 
Experiment with changing shadows on mouse interaction (click and hover) 


Bonus: Experiment with glows (colored shadows) 


REQUEST A DEMO Create your site > Start playing » Your email address 


А 


JONAS.IO 


SCHMEDTMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #6: 
BORDER-RADIUS 


HTML 


@ Use border-radius to increase the playfulness and fun of the design, to make it less serious 


LATEST COLLECTION 


Autumn — 
2020 


characterizes this Autumn 


Winter collection. 


LOOKBOOK › 


SERIOUS / ELEGANT 


® 


ФА parasit qikas 


Flawless Accounting 
Integration! 


ikas is fully integrated with the best accounting software for 


Stock 
Syncronization 


your wholesale and accounting operations! 


Learnmore > 


Daily 


El Sale Reporting 


PLAYFUL / FUN 


Es 


Order 
Tracking 


@ Use border-radius to increase the playfulness and fun of the design, to make it less serious 


@ Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


Start Deploying Get a Demo 


Vercel combines the best developer experience with an obsessive focus on end-user performance. 


64 Community Solar 


Breaking down barriers to solar benefits. 
Homeowners, businesses, and towns can enjoy 
savings by signing up for a community solar share. No 


rooftop panels required! 


a 


Learn More 


0, Community Solar Project Services > 


You develop the project, let our team acquire 
and т ge the customers. 


Community Solar Sales Partners > 


[o 


Our platform enables frontend teams to do their best work. 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


Very round typeface, lots of border- 
radius in button, icons and image 


Boxy/squared typeface, but designers wanted 
to add some playfulness, so little border-radius 


@ Use border-radius to increase the playfulness and fun of the design, to make it less serious 


@ Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


e Use border-radius on buttons, images, around icons, standout sections and other elements 


| Y k | Learn тоге 
Enter your work email address Get a demo кыдыы EN 


Get started Request a Demo REQUEST A DEMO 


Add to Chrome @ DOWNLOAD APP Get Started = Get My Records 


Helped get stakeholder buy- 
in, for an EdTech platform 


through a new user 


experience and visual refresh, 


іп 6 weeks 


| would 100% recommen d Heavyweight to 


anyone looking for a team to help with UX 


8 Ul. They uniquely were able to 


understand what we needed for our pro 


- the degree of complexity required, 


meeting deadlines, and [...] budget. 


0 Sam Green 


je 


ct 


Solar 101 


How to Build a Solar Farm 


Press 


Feeding Families in Need: Ren 
Energy Companies Enter the ^ 


Solar 101 


How the Seasons Affect Comr 
Solar 


Under the Hood at Grammarly: 


Transforming Writing Style with AI 


Take a deep dive» 


e Use border-radius to increase the playfulness and fun of the design, to make it less serious 
e Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


e Use border-radius on buttons, images, around icons, standout sections and other elements 


Ytrulia 


Inspiring Trust and Maximizing Clarity: 


Why Trulia's Editors Rely on Grammarly 


Get inspired > 


USE BORDER-RADIUS WELL 


^A 


Ө 
га 


2 


1 


2 


З 


Use border-radius їо increase the playfulness and fun of the design, to make ії less serious 


Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


Use border-radius on buttons, images around icons, standout sections and other elements 


Boost productivity 


Increase confidence 


Scale your product 


Gets feedback from 
stakeholders. 

With Greenlight you can easily collate 
feedback from those who matter on 


the product version that your users 
will see. 


G 


Works everywhere, 
even when you need to 


log in. 


It easily integrates with your 
workflow, without the need for any 
code or website iterations 


O 


Share securily with 
team members. 


Greenlight makes sure that anything 
behind a login is protected and your 
access design and security 
architecture stay the same 


O 


о 


Transaction Transparency 


We believe in transparency and fully validated transactions. That's 
why every time you (or your customers) choose to offset an 
emission-producing activity with Cloverly, we provide real-time 
transactional data to show the location, type, and amount of 
carbon offset. 


== 


Verified Sources 


Tech that keeps you safe Humans on hand Strong privacy To effectively neutralize carbon emissions, we know that quality 


| | | | matters. That's why Cloverly works with reputable, internationally 
We support face & fingerprint ID, and Our customer support team is ready to We never share your data with any 


use 256-bit TLS encryption. help you, 7 days a week. 


recognized suppliers who track and verify registered carbon 


other parties without your consent. offset projects. 


Use border-radius to increase the playfulness and fun of the design, to make it less serious 


Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


Use border-radius on buttons, images, around icons, standout sections and other elements 


Would you like to see Narrative 
Bl in action? 
Leave your email address to discuss how 


your company can get first actionable 


insights today 


Start your free trial 


Enter your email address Get started 
Join over 50,000 creative entrepreneurs and y 


: Free 14-day trial. No credit card required. 
start selling more today. 


What Activities Will You Offset? 


Neutralize your carbon footprint with the 
Cloverly АРІ. 


Try Cloverly 


USE BORDER-RADIUS WELL 


1 Use border-radius to increase the playfulness and fun of the design, to make it less serious 
2 Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


3 Use border-radius on buttons, images, around icons, standout sections and other elements 


Wow this is easy. Very smooth process. Thank you so much 
for getting this done before the trip, much appreciated. XK <<. 


Designing patterns is a big headache 


to me, thanks to Magic Pattern it 


Orlando, FL 


Vice President gives me the flexibility to create 
© ATLANTA, GEORGIA different kind of geometric patterns 


in one go! 


Hannah Milan 
A) PRODUCT DESIGNER -- Integrate your shop 
Set up your shopping cart 


| using Shopify and many 
Add dates for prices ж 5.0 (12) other stores to integrate with 


our fulfillment system. 


CHECK-IN CHECKOUT 


% 
Add date Add date " a e Woo ж 
АВ About BlueWave > 
GUESTS y 
1 guest Our Values 


Our Team 
Check availability 4 Contact Us F 


23 ( IV TeV jit it 


INN 39NASIO 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #7: 
WHITESPACE 


HTML 


г The right amount of 
whitespace makes designs 
look clean, modern and 
polished 


Whitespace communicates 
how different pieces of 
information are related to 
one another 


Whitespace implies invisible 
relationships between the 
elements of a layout 


Product Solutions Docs Pricing Sign Up | Contact Sales LogIn 
The leading geofencing > ae 
platform ES 


d location-based app experiences faster and grow revenue with 


m Hr at 


Developer-first Extensible Enterprise-ready 
Oper urce SDKs with ju Build locatior әсі ех tf ме, process 


Build location-based experiences across 


the customer journey 
Searching for locations 
Increase ynver ns by сс t tor with nearby place 1 ^ 4 , 
AN 
Search and geocoding APIs + 9 j 4 >> » 4 
Flexib nd affor leg ], sear | 4” E 9 
distance APIs wit ig juality ада and г M қ A 
on Q rp | 
ф е 
On the way to a location 
ncrease efficiency and improve the 


stomer experience with tr р 
о Trip tracking ~> 
Ever yt ус € very irbside 
кир га іл ) 110 14 папг teatu 


y. 
Trusted by thousands of developers, 
processing 100B+ queries per year 


НИ Ф 
в. | А 
— ge :г. 


Dashboard SDK Integrations 
figure geofences and visualize e Andro 5 1 Radar event ) other systerr 


VIEW DOCUMENTATION VIEW INTEGRATIONS 


VIEW DOCUMENTATION 


Looks a lot more polished, 
like the design has space 
to breathe 


E 
| 
The leading geofencing ~ ча”, 
platform | 


Build location-based app experiences faster and grow revenue with 
SDKs and APIs for geofencing, trip tracking, geocoding, and search. 


ғ 
С am 
| cer | im /route/di | 
— lal 
TIT at 
Developer-first Extensible Enterprise-ready 


and turnkey integratior 


Build location-based experiences across 
the customer journey 


Searching for locations 


nearby place 


thine 0 4 5 
i 1 ~ 
9 4 ' n (~ | 
4 4 | 
4 “Ж 4 
t 
Search and geocoding APIs — 0 i gr v Р ) 
N | 
Flexible апа affor ble ear па | 4 "ә © 
distance APIs with hi ty ad M 4 4 
4 і г 4 
pla lata „є 4 
S P restaurant 
9. ^ T 


On the way to a location 


Q Trip tracking + 
erything you need to I | 
кир, or ahead, ar i 


pr 
Trusted by thousands of developers, 
processing 100B+ queries per year 


— А [oe ga Ф 

, Á п ^ш 
Dashboard SDK Integrations 

1eofe € г < др 5 1 Radar events to other s 


VIEW DOCUMENTATION = VIEW DOCUMENTATION VIEW INTEGRATIONS 


es Log In 


ZI = 
А Radar Product Solutions Docs Pricing at % Up . ContactSales Login 


The leading geofencing : "т, 
platform 


2. 
Build location-based арр experiences faster and grow revenue with T 
SDKs and APIs for geofencing, trip tracking, geocoding, and search. | ^ 


e. KS 
| 
Enter your email P" ~ 55 
i" 


Questions? Contact our sales team 
/route/distance| 


Developer-first Extensible Enterprise-ready 


e Use tons of whitespace between в Р 


Open-source SDKs with industry-leading Build location-based experiences across the Built for scale, processing 100B* locations per 


е accuracy, simple documentation, flexible APIs, customer journey, from messaging to curbside year from 100M+ devices with enterprise-grade 
© e ( | О n S and turnkey integrations. pickup to address autocomplete. security, privacy, and support. 


Build location-based experiences across 
the customer journey 


Searching for locations | 


Increase conversions by connecting customers with nearby places and | | 


things. N 0 yn 


1 y % 4 M «S * 
Search and geocoding APIs + 9 MY 6 : v" » 1 
Flexible and affordable geocoding, search, and a ° ‚ e v 4 о 
distance APIs with high-quality address and ar Pr > * 
place data. М 2 о — 4 
~ i ny se 2 
On the way to a location 


, Increase efficiency and improve the customer experience with trip 


un h tracking and live ETAs. 
ча dy 
Ж ' ч 
22 ! 


„ ^, 4 
% ГЫ ү 
& 22 n 
| Trip tracking ~ 
! 
` ` 4 4 à чи Everything you need to build delivery, curbside 
ETÀ $ 11 pickup, order-ahead, and location sharing 
8 minutes features 
a © 7 
~. ДИ e 
Trusted by thousands of developers, 
. . 
processing 100B+ queries per year 
es 
LI ва со E 
29 
of on о 
т 
Dashboard SDK Integrations 
Configure geofences and visualize, Open-source iOS, Android, and web Send Radar events to other systems 
analyze, and segment your location SDKs that make adding location to via webhooks and turnkey 
data your apps simple integrations 


VIEW DOCUMENTATION VIEW DOCUMENTATION VIEW INTEGRATIONS 


& pl um Save Invest Reduce Bills Help Careers 


The Al assistant | = 


that grows your Р 
£1,819.82 
money. ній 
Set more money aside, invest in what matters to you cs > ” 
and save оп bills. Get started for free іп 2 minutes. me ec — 20 
| c гі cds e са» 
« App Store Google Play => Өз а ~ 


e Use tons of whitespace between шыл omn rere 
sections 


Bank, meet Plum. 


Give your bank a brain. Plum uses the latest technology 
to help you be better off, effortlessly. Go on, give 


ЕЗ О 
yourself a high-five & 


Link your bank(s) Plum automatically sets money Be better off 

Plum analyses your transactions daily aside Plum helps you set aside more, invest 
to learn about your income and Every few days, Plum does the maths and stops you being overcharged on 
spending. and transfers the perfect amount from bills. 

We support all major UK banks > ped ау account. Little by little, it 


Q^- now 
Your Pium balance is £420.96 #41 set aside £175.19 
for you last month d 


Save money 
automatically a 


Our smart algorithm analyses your spending and 
helps you save without even thinking about it @ You 
can also earn up to 0.40% interest (AER). 


© Learn more about our Account > 


£350m+ 11.92% £179/year 


Set aside by 1 million+ people across Avg. annual return last 5 years across Average savings per customer on 
the UK all Plum investment funds (Jan 21) regular bills 


Learn more Learn more Learn more 


Use tons of whitespace between 


Searching for locations 


things. 


Use a lot of whitespace between | 
groups of elements 2.2 .. 


р!асе даїа. 


Bank, meet Plum. 


Give your bank a brain. Plum uses the latest technology 
to help you be better off, effortlessly. Go on, give 
yourself a high-five & 


8 minutes 


2 3 


Link your bank(s) Plum automatically sets mone Be better off 


Plum analyses your transactions dail aside Plum helps you set aside more, inves 
to learn about your income and Every few days, Plum does the maths and stops you being overcharged on 
spending. and transfers the perfect amount fro bills. 


We support all major UK banks > your bank account. Little by little, it 


adds up. 


Increase conversions by connecting customers with nearby places and 


Build location-based experiences across 
sectio AS the customer journe 


% 4 
Ay o restaurant| 


( 


On the way to a location 


Increase efficiency and improve the customer experience with trip 
tracking and live ETAs. 


Trip tracking > 
Everything you need to build delivery, curbside 
pickup, order-ahead, and location sharing 


features. 


Use tons of whitespace between 


sections 


Use a lot of whitespace between 


groups of elements 


What makes Narrative Bl so unique? 


Popular tools on the market either require specialized skills to make you or 


your team members work for deep unbiased analytical insights, while 


Narrative Bl brings them right to you. 


Predictive Insights 


Using anomaly detection, Narrative Bl's proprietary 
algorithms generate meaningful insights for the user 
without the click of a button. Narrative Bl uses time-series 
analysis to discover key trends from historical data to 


predict future outcomes. 


Natural Language Processing 


Narrative Bl speaks your language. Through our patent- 
pending Natural Language Generation Engine, users can 


receive insights described in plain English. 


THREE STRENGTHS 
Something for everyone. 


Choose the strength that works best for you or 
try them all with the Feals Flight. 


1200 MG 
$134.95 


Best Seller 
Ж Ж Ж Ж Ж 2080 Reviews 


Our most popular product packs twice the amount of CBD 
in the same conveniently sized bottle. 


Learn More 


$134.95 | Get Monthly & Save 30% 


Use tons of whitespace between 
sections 


Use a lot of whitespace between 
groups of elements 


Use whitespace between elements 


Best Seller 


Ж Ж Ж Ж Ў 2080 Reviews 


Our most popular product packs twice the amount of СВО 
in the same conveniently sized bottle. 


Learn More 


$134.95 | Get Monthly & Save 30% 


ЖЕП 


is i 


Bank, meet Plum. 


Give your bank a brain. Plum uses the latest technology 
to help you be better off, effortlessly. Go on, give 
yourself a high-five & 


Link your bank(s) Plum automatically sets money 


| Plum analyses your transactions daily aside 
to learn about your income and Every few days, Plum does the maths 
spending. and transfers the perfect amount from 
—> your bank account. Little by little, it 


We support all major UK banks > 
adds up. 


Searching for locations 


Increase conversions by connecting customers with nearby places and 
things. 


Search and geocoding APIs > 


Flexible and affordable geocoding, search, and 
distance APIs with high-quality address and 


place data. 


4 


Be better off 


Plum helps you set aside more, invest 
and stops you being overcharged on 
bills. 


> ^ May, 
» { | 1 
( 4 1 P ` 
{ iv 
у А 4 22 2 22 2 
Жо 2 & а 2: 222 


o, Z © restaurant) 


5 
Шы”, SZ 


Use tons of whitespace between 
sections 


Use a lot of whitespace between 
groups of elements 


Use whitespace between elements 


Inside groups of elements, try to 
use whitespace instead of lines 


SOLUTIONS COMPANY 


Community Solar > 
CS Project Services 


CS Sales Partners 
Solar Development > 


Property Owners 


Our Projects 


SOLUTIONS COMPANY 


Community Solar › 


CS Project Services 


CS Sales Partners 


Solar Development > 
Property Owners 


Our Projects 


e The more some elements (or groups of elements) belong together, the closer they should be! 


The "Law of DS 


Proximity” 


No separation between 
elements, confusing spacing 


Title and text belong 
together, therefore there is 
less space between them 


Developer-first 

Open-source SDKs with industry-leading 
accuracy, simple documentation, flexible APIs, 
and turnkey integrations. 


Developer-first 


— 


Open-source SDKs with industry-leading 


accuracy, simple documentation, flexible APIs, 


and turnkey integrations. 


EA 

TIT 

Extensible 

Build location-based experiences across the 
customer journey, from messaging to curbside 
pickup to address autocomplete. 


Extensible 


Build location-based experiences across the 
customer journey, from messaging to curbside 
pickup to address autocomplete. 


Ө The more some elements (ог groups of elements) belong together, the closer they should be! 


Ambiguous spacing. 
What field do labels 
belong to?! 


Contact support 


Question 
Select your question... 


Tell us more—how can we help? 


Your email address # 


<> 


Contact support 


Question 


Select your question... 


Tell us more—how can we help? 


Your email address # 


Each label clearly 
belongs to a certain 
input field 


Why is the button 


section? 


closer to the lower га Community Solar 


Breaking down barriers to solar benefits. 


Homeowners, businesses, and towns can enjoy 
savings by signing up for a community solar share. No 


rooftop panels required! 


Learn More 


[o 


[o 


Community Solar Project Services > 

You develop the project, let our team acquire 
and manage the customers. 

Community Solar Sales Partners > 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


Ө The more some elements (ог groups of elements) belong together, the closer they should be! 


Button seems to 
belong to text block, 
so it's closer 


ГА Community Solar 


Breaking down barriers to solar benefits. 
Homeowners, businesses, and towns can enjoy 
savings by signing up for a community solar share. No 
rooftop panels required! 


Learn More 


0, Community Solar Project Services > 
You develop the project, let our team acquire 
and manage the customers. 

0, Community Solar Sales Partners > 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


e The more some elements (or groups of elements) belong together, the closer they should be! 


6 Start with a lot of whitespace, maybe even too much! Then remove whitespace from there 


& Too much whitespace looks detached, too little looks too crammed 


?? 


Everything 
is detached 


Boost productivity 
Make your product more valuable to your users 


by boosting their productivity through 
optimised UX. 


Increase confidence 


Seamless UX and sleek Ul increases customers’ 


confidence in your application's ability as a 
whole. 


Scale your product 


Rapidly scale up your product without 
sacrificing quality by implementing a design 
system. 


уо, 


Boost productivity 
Make your product more valuable to your users by 
boosting their productivity through optimised UX. 


Increase confidence 
Seamless UX and sleek UI increases customers' 


confidence in your application's ability as a whole. 


Scale your product 
Rapidly scale up your product without sacrificing 
quality by implementing a design system. 


Way too crammed 
and uninviting 


jo 


Boost productivity 


Make your product more valuable to your users by 
boosting their productivity through optimised UX. 


Increase confidence 


Seamless UX and sleek UI increases customers' 
confidence in your application's ability as a whole. 


Scale your product 


Rapidly scale up your product without sacrificing 
quality by implementing a design system. 


Just right, design 
can breathe 


& Too much whitespace looks detached, too little looks too crammed 


Huge text, lots of 
whitespace 


We partner with 
venture capital 
firms and angel 
investors to 
make sure their 
startups cut 
through. 


By taking the founder's vision and turning this 
into a brand narrative, we help them find their 
place in the world. Our process has been tested 


and the results have: 


* Helped our clients raise $200m 
* Grow teams of 2 up to 200 


* Received over 20 million media impressions 


Q Video + Brand Strategy 
Vision, Mission, Values, Messaging * Video Strategy 


Q Brand Identity 

Name, Logo, Colours, Тур 
Q Website 

Mockup, Design, Dev pmen 
Q Photography 
O Animation 

Explainer Vide: 


Q Video Production 
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ь 
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e c — ef J | 
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Microsoft 365 AA a? : we 
> 6? 3 

Premium Office apps, extra cloud storage, advanced security, and тоге—ай іп aS Е. - РА 
ipti — . 
> 


ЕЯ 
ор Business 
” 
GAME PASS 


Xbox Game Pass Ultimate 
Xbox Live Gold and over 100 high-quality consol 
jether fri 


PC games. Play together with friends and discover you 


е game 
Join now Compare all plans 


Su ess usiness Resou Microsoft Tea 
mat ransform you ese ti Chat, 
nd technolog Learn mo! есш 
Shop now irn more Shop now 


The more some elements (or groups of elements) belong together, the closer they should be! 


Start with a lot of whitespace, maybe even too much! Then remove whitespace from there 


Match other design choices. If you have big text or big icons, you need more whitespace 


Small text and 
images, less space 


The тоге some elements (or groups of elements) belong together, the closer they should be! 


Start with a lot of whitespace, maybe even too much! Then remove whitespace from there 


& Too much whitespace looks detached, too little looks too crammed 
Match other design choices. If you have big text or big icons, you need more whitespace 


Try a hard rule, such as using multiples of 16px for all spacing 


2px @ 
Арх 
8px 
12px 
16px 
24px 
32px 
48px 
64px 
80px 
96px 
128px 
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SCHMEDTMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #8: VISUAL 
HIERARCHY 


HTML CSS 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


Ж 5.0 (12) - $ Superhost - Sesimbra, Setubal, Portugal 


> 


Share Ф Saved 


г Visual hierarchy is about establishing 
which elements of a design are the most 
important ones 


& Visual hierarchy is about drawing attention 
to these most important elements 


Z- Visual hierarchy is about defining a "path" 
for users, to guide them through the page 


Tiny house hosted by Eco-Lodge Villa Epicurea 
4 guests · 1 bedroom · 3 beds - 1 bath 


AT 
ah 7 
ara) | 

Ce ) 
25% 


СНЕСК-ІМ 
3/8/2021 
A Entire home 


You'll have the tiny house to yourself. 


г We use a combination of position, size, cas 


This host committed to Airbnb's 5-step enhance 


colors, spacing, borders, and shadows to 9  EcoLodge Vila Epicureaisa Super 


Superhosts are experienced, highly rated 


GUESTS 
1 guest 


aning process. Learn more 


Reserve 


o are committed to providing great stays for You won't be charged yet 


guests. 
e ө ө ө €106 x 2 nights 
esta blish а | | leaningful visual hierarchy 22 Free cancellation until 3:00 РМ on Ма Service fee 
After that, cancel before 3:00 PM on Mar 8 and get a 50% Sinus the first night and 
service fee. Get details 


Total 


р House rules 
This place isn't suitable for infants (0-2 yrs) and the host doesn’t allow parties or smoking. Get 


details # Report this listing 


Visual hierarchy is about establishing 
which elements of a design are the most 
important ones 


Visual hierarchy is about drawing attention 
їо these most important elements 


Visual hierarchy is about defining a “path” 
for users, to guide them through the page 


We use a combination of position, size, 
colors, spacing, borders, and shadows to 
establish a meaningful visual hierarchy 
between elements/components 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


Ж 5.0 (12) - Y Superhost · Sesimbra, Setubal, Portugal 


Tiny house hosted by Eco-Lodge Villa Epicurea С 
4 guests · 1 bedroom · 3 beds · 1 bath см 


(0) 
~ 


од 


Entire home 


You'll have the tiny house to yourself. 


Enhanced Clean 
This host committed to Airbnb's 5-step enhanced cleaning process. Learn more 


Eco-Lodge Villa Epicurea is a Superhost 
Superhosts are experienced, highly rated hosts who are committed to providing great stays for 
guests. 


Free cancellation until 3:00 PM on Mar 5 
After that, cancel before 3:00 PM on Mar 10 and get a 50% refund, minus the first night and 
service fee. Get details 


House rules 
This place isn’t suitable for infants (0-2 yrs) and the host doesn’t allow parties or smoking. Get 
details 


Т, Share Y Saved 


€106 / night * 5.0 (12) 
CHECK-IN CHECKOUT 
3/10/2021 3/11/2021 
GUESTS 
1 guest bd 


Reserve 


You won't be charged yet 


€106 x 1 night €106 
Service fee €0 
Total €106 


"6 = Report this listing 


Visual hierarchy is about establishing 
which elements of a design are the most 
important ones 


Visual hierarchy is about drawing attention 
їо these most important elements 


Visual hierarchy is about defining a “path” 
for users, to guide them through the page 


We use a combination of position, size, 
colors, spacing, borders, and shadows to 
establish a meaningful visual hierarchy 
between elements/components 


Eco-Villa Garden Pool % Sea View (Villa Epicurea) 


Ж 5.0 (12) - Y Superhost - Sesimbra, Setubal, Portugal (y Share Y Saved 


я: ::: Show all photos 
at 


Tiny house hosted by Eco-Lodge Villa Epicurea A €106 / night * 5.0 (12) 
4 guests - 1 bedroom. З beds - 1 bath а Y 
CHECK-IN CHECKOUT 
3/10/2021 3/11/2021 
(Q Entire home GUESTS T 
You'll have the tiny house to yourself. 1 guest 
<> Enhanced Clean — 
This host committed to Airbnb's 5-step enhanced cleaning process. Learn more 
= Eco-Lodge Villa Epicurea is a Superhost Хоре саша yer 
Superhosts are experienced, highly rated hosts who are committed to providing great stays for | 
Ва Р my Е 99 у €106 x 1 night €106 
guests 
Service fee €0 
В Free cancellation until 3:00 РМ on Mar 5 
After that, cancel before 3:00 PM on Mar 10 and get a 50% refund, minus the first night and 
service fee. Get details Total €106 


House rules Report this listing 
This place isn’t suitable for infants (0—2 yrs) and the host doesn’t allow parties or smoking. Get 
details 


@ Position important elements closer to the top the page, where they get more attention 


Integrations Resources 


Most important title, 


weine Те only all-in-one 


a alytics tool for ATTENTION FLOWS 


DOWN THE PAGE 
(AND COMPONENTS) 


Most important 


call-to-action, close 
to top of the page I 4 


VISUAL HIERARCHY FUNDAMENTALS 


1 Position important elements closer to the top the page, where they get more attention 


2 Use images mindfully, as they draw a lot of attention (larger images get more attention) 


64 Community Solar | а Search aveo 


Breaking down barriers to ог benefits. pretty.mutts Message av козе 


Homeowners, businessesfand towns can enjoy 


6 posts 78 followers 52 following 


savings by signing up # a community solar share. No 


Pretty Mutts 

Stylish, eco-friendly and vegan dog accessories. 
ка Handmade in Portugal 

Q Worldwide shipping 

Ў We donate to local dog shelters 

$ Shop now 

www.etsy.com/shop/prettymutts 


rooftop panels requj 


Learn More 


EH POSTS ($) TAGGED 


0, Community Solar Project Services > > 
You develop the project, let our team acquire ; сие: к 
NN M 
and manage the customers. N ааъ 
0, Community Solar Sales Partners > 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


@ Position important elements closer to the top the page, where they get more attention 
@ Use images mindfully, as they draw a lot of attention (larger images get more attention) 


e Whitespace creates separation, so use whitespace strategically to emphasize elements 


More than 
MP a designer 


Redesk Keep it stupid Award-winner Keen to learn 
0 


Version 1 


And many more features coming soon to Premium! 


Work hard Play hard 


= 


Confusing! No hierarchy 
at all 


Increasing font size 


Increasing font weights 


Lightening color of less 
important text. Perfect! 


@ For text elements, use font size, font weight, color, and whitespace to convey importance 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


Ж 5.0 (12) . $ Superhost . Sesimbra, Setubal, Portugal 


Y 
Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


* 5.0 (12) . $ Superhost . Sesimbra, Setubal, Portugal 


Y 
Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


Ж 5.0 (12) . $ Superhost . Sesimbra, Setubal, Portugal 


Y 
Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


Ж 5.0 (12) - $ Superhost . Sesimbra, Setubal, Portugal 


@ For text elements, use font size, font weight, color, and whitespace to convey importance 


Inspect Designs о 20px | 


Copy-paste code « specs апа ехропапу 
asset 


Learn More > 


e Kevin Bell 
UX Developer at Techmates Group 


"With Avocode, our devs can easily access 
all elements within design source files 
without forcing designers to prepare 
layers in Sketch." 


Confusing! No 
hierarchy at all 


Inspect Designs 20px 


Copy-paste code 
& specs and export 
any asset 


UX Developer at Techmates Group 


"With Avocode, our devs can easily access all elements 
within design source files without forcing designers to 


prepare layers in Sketch." pk 


(2) Increasing font sizes 
and adding whitespace 


Inspect Designs 


& specs and export 
any asset 


Learn More > 


“XS Bdlideritmamidngbt 


Ж dieenakhlaekisddekt 
fot Kevin Bell J 


UX Developer at Techmates Group 


"With Avocode, our devs can easily access all elements 
within design source files without forcing designers to 
prepare layers in Sketch." 


Adding font weight 
and color. Perfect! 


VISUAL HIERARCHY FOR TEXT ELEMENTS 


4 For text elements, use font size, font weight, color, and whitespace to convey importance 


Let's team upyand design 

something rerharkable Designed a seafnless journey 
across digital And real-world 
touchpoints for Heineken, in 6 
weeks 


iscover Your Strength 


ES 
Й 


Our agile process supercharge& your product design. 


We have had 3 great experience working 


Su Eye-catching 


background color 


euro 


Your email address Getintouch > 


Up to 


reMarkable 2 


| д ТЫ reMarkable 1 
Зх the battery life = Nice and subtle 
© background color to 


Two weeks of battery without rechargiagakia Estimated battery life improvement 
make content stand out 


тіне —— Есо-МШа Garden Pool & Sea View (Villa Epicurea) 


Icon ===> x 5.0 (12) . Y Superhost . Sesimbra, Setubal, Portugal —— Link 


Data point 


N 


Icon ——> Ж. 


Sub-title ————49 Close to the metal 


Link 


direct integrations with 
card networks and banks to 
checkout flows in the browser, 
we operate on and optimize at 


every level of the financial stack. 


» 


Fastest-improving platform 


We release hundreds of features 
and improvements each year to 
help you stay ahead of industry 
shifts. (On average, we deploy 
our production API 16x per day.) 


De-emphasizing additional information 


5% 


| Battle-tested reliability 


Our systems operate with 
99.9%+ uptime and are highly 
scalable and redundant. Stripe 
is certified to the highest 
compliance standards. 


@ For text elements, use font size, font weight, color, and whitespace to convey importance 


5 What text elements to emphasize? Titles, sub-titles, links, buttons, data points, icons 


в You сап also de-emphasize less important text, like labels or secondary/additional information 


Sub-title — 1 HAPPINESS GUARANTEE 
Title —> Love it, or it's on us. 


D 


Icon — [2 


Try Feals risk-free 


Sub-title 
© кы No fuzzy haze 


2 All natural ingredients 


Sub-title --------------> INTEGRATED 


Access а complete payments platform with 
simple, pay-as-you-go pricing 
Important 
data points To, 14% + €0.25 29% + €0.25 


7 for European cards for non-European cards 
De-emphasizing 


additional information © Everything you need to manage payments 


| У P» Get hundreds of feature updates each year 
Icons 


* Мо setup fees, monthly fees, or hidden fees 


Very subtle button 


(focus is on prices) A > GET STARTED IN MINUTES > 


Icons ——» mr 558 ae 


@ For text elements, use font size, font weight, color, and whitespace to convey importance 


5 What text elements to emphasize? Titles, sub-titles, links, buttons, data points, icons 


в You can also de-emphasize less important text, like labels or secondary/additional information 


Important 
data points 


Based on data e^ ЊУ 


486M Су 1.05М 


TICKETS CUSTOMERS AGENTS 


N De-emphasizing label 


pretty. mutts Message sv 


Data 


paint = 6 posts 78 followers 52 failowing 


De-emphasizing buttons (on 
instagram, all focus is on photos) 


в Emphasize ап important component using background color, shadow, ог border (or multiple) 


S Lattice _EARBANC BRILLIANT 


— Stripe is the leader in the Forrester Wave™ 


Stripe was rated the Nighest scoring out of ten | 4.0/5.0 | 4.2/5.0 
global payments provid&s—recognized for its 
feature-rich platform, scal&&and speed of 
innovation. 


Read the report > 


Product offering rating Strategic vision rating 


With Stripe's reliable and developer-friendly tools, Glossier's 


engineering team is freed up to focus on product and 


= customer experiences. Glossier. 
We discover 

candidates you 
actually want to 
talk to. 


Dover uses a robust calibration process to deeply 
understand your requirements. 


е - . 
lyf st: slack Glossier. charity: water 
Then, our system evaluates prospective candidates Ди ла M КА 
оп 50+ data points so we can find qualified Yo: A MEA 


candidates who are the best possible fits. 


в Emphasize an important component using background color, shadow, or border (ог multiple) 


Tiny house hosted by Eco-Lodge Villa Epicurea (a 
4 guests - 1 bedroom · 3 beds - 1 bath "а 


< E 


O 
O 


ir 


Entire home 


You'll have the tiny house to yourself. 


Enhanced Clean 


This host committed to Airbnb's 5-step enhanced cleaning process. Learn more 


Eco-Lodge Villa Epicurea is a Superhost 


Superhosts are experienced, highly rated hosts who are committed to providing great stays for 
guests. 


Free cancellation until 3:00 PM on Mar 5 
After that, cancel before 3:00 PM on Mar 10 and get a 50% refund, minus the first night and 
service fee. Get details 


House rules 


This place isn't suitable for infants (0-2 yrs) and the host doesn't allow parties or smoking. Get 
details 


6106 / night * 5.0 (12) 
CHECK-IN CHECKOUT 
3/10/2021 3/11/2021 
GUESTS 
1 guest М 


Reserve 


You won't be charged yet 


€106 x 1 night €106 
Service fee €0 
Total €106 


90 Report this listing 


Sending 1,0008490 GBP with 


~ Cheapest 


wise 


N Remitly 


Promises Dellvered 


хоот 


М4 monese 


# BARCLAYS 


ћ У 4 
HALIFAX 
P AN 


Р PayPal 


Recipient gets 


(Total after fees) 


1,160.39 EUR 


1,154.64 EUR 
v - 5.75 EUR 


1,149.41 EUR 
v - 10.98 EUR 


1,138.92 EUR 
v - 21.47 EUR 


1,133.18 EUR 
v - 27.21 EUR 


1123.26 EUR 
v - 37.13 EUR 


1108.94 EUR 
У - 51.45 EUR 


Transfer fee 


3.69 GBP 


2.99 GBP 


1.99 GBP 


20.00 GBP 


0.00 GBP 


0.00 GBP 


0.00 GBP 


Exchange rate 
(1 GBP + EUR) 


1.16469 


Mid-market rate 


1.15810 @ 


1.15170 @ 


1.16216 @ 


1.13318 @ 


1.12326 e 


1.10894 @ 


on yourt design project 


Creating Ul design takes time and effort, so get the most out of your design by 
handing off screens at the right time to the right people. 


(6) Sign up for web app Download desktop app 

Easily sync frames via our Figma plugin and import Auto-installs Sketch, XD, Photoshop, and Illustrator 
any Sketch, Adobe XD, Photoshop, or Illustrator plugins to sync whole files or particular screens for 
design file by drag & drop. free hand-off. 


name@company.com START NOW Y DOWNLOAD APP 


=> 


в Emphasize an important component using background color, shadow, or border (ог multiple) 


Ф Try emphasizing some component А over component В by de-emphasizing component В 


on yourT design project 


Creating Ul design takes time and effort, so get the most out of your design by 
handing off screens at the right time to the right people. 


©) Sign up for web app Download desktop app 
Easily sync frames via our Figma plugin and import Auto-installs Sketch, XD, Photoshop, and Illustrator 
any Sketch, Adobe XD, Photoshop, or Illustrator plugins to sync whole files or particular screens for 


design file by drag € drop. hand-off. 


name@company.com START NOW Ш @ DOWNLOAD APP 


Component A has been made more 
prominent simply by de-emphasizing B 


в Emphasize an important component using background color, shadow, or border (or multiple) 


@ Try emphasizing some component A over component В by de-emphasizing component В 


Jo 


For you 


Hobby 


Free, forever 


Deploy from 
С) citHub personal accounts 
Ag) GitLab personal accounts 


Е Bitbucket personal accounts 


>_ Command-Line Interface 


Deploy for Free > 


For your team 


Pro Enterprise 


$20/mo per member Suited to your needs 


Deploy from 
O GitHub Organizations & GitLab Groups W Bitbucket Teams 


>_ Command-Line Interface 


Additional Features Additional Features 


- Up to 10 Team Members - SLA for 99.99% Uptime 
- Advanced Invoice Settings 

- Multiple Concurrent Builds : - Enterprise Support 
- Preview Deployment Suffix : - Next.js Application Audit 


- Password Protection : - „.and much more 


- Multi-Region Serverless Functions 


О) 
mm 


PRODUCTIVITY 


Develop a growth 
mindset in your team 
Published on February 23rd, 2021 


Start 14 Day Pro Trial > Contact Enterprise Sales > 


Each plan is subject to our fair use policy and its respective platform limits. 
Hobby plans are limited to personal, non-commercial use. 


Featured insights 


REMOTE WORK 


How to keep your remote 
team engaged 


Published on February 10th, 2021 


Read all articles 


COACHING 


How coaching helps your 
team during CoVID-19 


Published on January 27th, 2021 


Emphasize an important component using background color, shadow, or border (or multiple) 


Try emphasizing some component A over component B by de-emphasizing component B 


What components to emphasize? Testimonials, eall-to-action sections, highlight sections, 


preview cards, forms, pricing tables, important rows/columns in tables, etc. 


Security and compliance 


Compliance built for platforms and 
marketplaces 


Paying out money is complicated by stringent 
regulations that vary by country. Connect shifts 
payments compliance obligations from you to Stripe. 
Under the hood, Connect offers card data tokenization wetnauel 
to help with PCI compliance, provides verification 
systems to manage KYC checks, leverages Stripe’s 


licenses around the world, and more. А А 1 / Ел 
аботпесі allows us to achieve compliance with minimal 


effort, spend practically no time on payments-related 


Y Optimized identity verification requirements : 
customer support, and keep the user experience on our 


KYC and AML checks for individuals and busi = 
5 en еды ыы ы ie ындыны platform. And, it's reassuring to know that when we're 


FAC and ti | А i А 
p Uo sanc кент expanding to a new country, Stripe will be ready for us.ä€ 


Y MATCH list checks 
v Secure credit card data tokenization for PCI compliance Johannes Koeppel, CEO and Co-Founder 
ғ Compliance with global regulations, including PSD2/SCA 
y Money Transmitter Licenses (MTL) in the US 

Y E-money (EMI) License in the EU 


See all features » 


At Narrative Bl, we put our product, clients and culture first. 


Would you like to see Narrative 
Bl in action? 


Leave your email address to discuss how 
your company can get first actionable 
insights today 


Narrative В! 


You don't have to play 
all the parts. 
We partner with the best 
stripe Google IN gusto О circoli 


HR Production of the Highest Quality 


Employees come in all shapes and sizes. Find the 
right fit. 


Focus on casting and screening Let Clerksy hande contracts, resolve any on set-conflicts and make sure you are compliant 


with work and safety boards. 


N 
ра 


Linkedin Twitter 


é 


/ 


|| 
Шын 


VISUAL HIERARCHY BETWEEN COMPONENTS 


6 Emphasize an important component using background color, shadow, or border (or multiple) 
7 Try emphasizing some component A over component B Бу de-emphasizing component B 


8 What components to emphasize? Testimonials, call-to-action sections, highlight sections, 
preview cards, forms, pricing tables, important rows/columns in tables, etc. 


THESEA АЕ FOREST 
EXPLORER HIKER 


Join the team 


MEDIUM 7-DAY TOUR EASY 5-DAY TOUR 


Exploring the jaw-dropping US east coast by foot Breathtaking hike through the Canadian Banff 
and by boat National Park 

(©) Miami, USA В June 2021 ©) Banff, CAN В April 2021 

ш 4 stops = 15 people FJ 3 stops а 25 people 
$497 $397 


Get a demo 
of Workable 


Workable offers a full suite of features and tools 


to help at every stage of your hiring process. 


Book a call now to: 


@ Receive an overview of Workable's platform from a 


product expert 


© Discuss your hiring goals and explore tools to 


advance them 


z= Get pricing based on your needs 


for ® Sketch 


$48 


@) Personal license 


@) Sketch files 


@) Auto-updatable Style Guide 


@) 200 Components 
@) 120 Wireframe layouts 


@) Free Updates 


Buy for Sketch 


for F Figma 


$48 


@) Personal license 

@) Figma files 

@) Auto-updatable Style Guide 
6) 200 Components 

@) 120 Wireframe layouts 


@) Free Updates 


Buy for Figma 


for Teams 


tom 978 


Team license 

Sketch & Figma files 
Auto-updatable Style Guide 
200 Components 

120 Wireframe layouts 


Free Updates 


Choose Your License 


Wells Fargo 
Preferred Checking 


Unlimited Cash Back' 


APY on Deposits 


Free ATMs 


Free Cash Advance? 


Merchant Perks’ 


Get Paid Early? 


No Overdraft Fees 


Emphasize an important component using background color, shadow, or border (or multiple) 
Try emphasizing some component A over component B by de-emphasizing component B 


What components to emphasize? Testimonials, call-to-action sections, highlight sections, 


preview cards, forms, pricing tables, important rows/columns in tables, etc. 


Bank of America 
Advantage 
Relationship 


Chase Premier 
Plus Checking 


А 


JONAS.IO 


SCHMEDTMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES +9: USER 
EXPERIENCE (UX) 


HTML 


14 
Design 15 not just what it looks like 
and feels like, Design ¡sHOWitworks 


User Interface (UI) is the visual 
presentation of a product. It's how 
the graphical interface looks and 
feels like 


=> Layout 
> "Personality" 


г Typography, colors, icons, etc. 


- Steve Jobs 


ка F3 gre Alerts Settings 


User Experience (UX) is the 
overall experience the user has 
while interacting with the product 


= Does the app feel logical and well thought out? 
=> Does the navigation work intuitively? 


Z- Are users reaching their goals? 


Ul AND UX DESIGN 


Ul is graphical interface = UI Design is 
what makes an interface beautiful 


Ul => 

UX is experience with interface = UX 
on | Both аге 

Design is what makes an interface meraca te 
useful and functional get ketchup 
& UX Design can not exist without UI Design! 

UX т 

Ul UX 
Design Design Each creates 
a different 


experience 


UX DESIGN GUIDING PRINCIPLE: GOALS 


> A website or application exists for a reason: a user has а => UX Example: 
goal for visiting it, and a business has a goal for creating it 


USER BUSINESS 
GOALS GOALS Highlighting an option in the 


product pricing table: 
Ф ES] 


< Helps the user decide faster 
what is the best option @ 


- Helps the business maximize 


EXAMPLE: Designing EXAMPLE: Selling Е л 
websites faster Good UX design aligns design kits for design Е 
the user's goals with the tools 


business' goals 


UX RULES FOR USABILITY 


1 Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


Ату (e) | Solcelle-pakker 4WD 


к 


Bildefliser Nyhet! 


Bil, el-bil-barn,Gas 
Bilbane 
Conrad-elektronik 
Digital-Kikkert 
Disko-Lys 
Dummy-Kamera 
DVD-Spiller 
Elektronikk & DAB 
EL-Scooter & Bil 
Figurer 

Golf-biler (m/skilt) 
Hobby & RC 
Hoverpod 
HP-Maler (Bil) 
Isbitmaskin 
Kamera (trådløst) 
Kino (baerbar) 
Kompass (Bil/Bat) 
Laser-Jamer (Bil) 
Luft-Jekk 

Lykt (oppladbar) 
Mobil-telefon-1, 2 
Motorsykkel-Mini 
Omformer (110V) 
Oversetter (44 sprk) 
PC-mini (9 ", 2. 
Rakett-Fly 

RC Produkter 


Robot-Hund el-sykkel “#| Krafti RC Fly-Bat Cell Phones & Accessories 
PARO aus 1| Кай! i y 
Robot-Stevsuger |m/Oljestyrte 9 RG ТЕНК | 70 cm lang Computers & Accessories 


Roboter 
Solcelle-Ryggsek 


El-ATV til 
Barn & Voksne. 
fra kr. 3998,- O 


Mercedes SUV 
m/ Gummi-Hjul 
fra Кг. 2998- el-A 


Nyhet 


el-Bil; Cross-Rider 
fra kr. 89.998,- 


skivebremser 
fra 6.998,- 


Т 
о el-ATV med 19.998,- 
skilt (16 аг) 


Luft-jekk (4.2 tonn) Alarm Wi-Fi | el-sykkel 


alders-grense 


el-ATV el-scooter 
BMW-i8 


xu diy 


arn, Ungdom & Voksne 


el-moped med 
skilt (16 àr) > Di 
el-bil (16 ár & moped- 
Lappen) fra kr. 34.998,- 9 
Lyd, Rok, Lys 
d. 
= 
Nyhet ! 


3-Hjuls Metall (55 cm) 


med Luftkanon 


- Elektrisk-ATV -Roboter 426 Ansreskiema 
- el-biler til barn/ungdom 
- Solcelle-produkter 

- Forbruker Elektronikk 


- Batterier & Ladere, etc 
- Fjernstyrte produkter 
- Disko-Lys - Rakett 


Alle Produktene pá 
denne siden lagerføres 
hos ARNGREN i Oslo. 
Se Lagerkoden etter 
Prisene (lev. 2 - 5 dager) : 
@ Er pa Lager 

@ Kommer for 3 uker 
О Lengre enn 3 uker 


4WD, 3-seters Willy 
el-Jeep, .med 
Gummihjul 


Ta alltid ut 230Vac Adapteren 
nar du ikke er tilstede, eller sov 


И Ж 


el-jeep 9998, - 


100kmit 


Elektrisk-ATV EL-Scooter 
6000 watt 5000 watt © 
kr. 59.998,- © кг. 29.998,- 


fra kr. 1299,- € 


қ . БЕБЕ ж-< el-biler til barn Index | | | Deliver to Jonas 
re a Ё. ~ ЕЕ арыны > Drone-B amazon y 
ce = www.ARN G RE N ‚net : e B- ( Fra 07.11.2004) Search ed 79 Санаа 0 0 е © Olhão 8700-224 
9 Teknologi & Gadgets < Frithjof i sin Fly-Bil «7 
23 Butikker g! 9 NES 3 Slik Betaler du емеш kr 19.99! == All Today'sDeals Jonas's Amazon.com Customer Service Buy Again Browsing History ~ Gift Cards Sell Registry 
| — - Elektriske-Kjoretey (^^. Kjepsloven 
ngen ж 


Block distractions 


WH-1000XM4 noise-cancelling 
headphones 


SHOP NOW > 


SONY 


сене Shop by Category 
Electronics 
Accessories & Supplies 
Camera & Photo 


Car & Vehicle Electronics 


Electronics Warranties 


Star Wars til Bil eller Bat. ан & — | fra kr-9.998,- | а kr.1.298,-0 GPS, Finders & Accessories 
pasen poy Elektronikk | fra кг. 998,- © el-ATV qoe Disko-Lys y ei Headphones 
— LO иа, д PA э — —— re о и 

Y i - Home Audio 
Tur & Amb. Ur ы 1 == жеті de gel Office Electronics Computers ; Cell Phones Photography я 
Walkie так Talk "E сун Е kraftigste. sg pate | : & Accessories TV & Video & Accessories & Videography Home Audio 

alanse 242 kr. 599,- © Portable Audio & Video 
Alarm Wi-Fi 8 GSM kr. 1998,- O 


Elektronikk 


En-hjul 
el-scooter 
9.998,- ө 


- mi^ Kikkert Damp-maskin 


RC Fiskebát 


20-144x, 
m/Fish-Finder Fotball-Tren Teleskop = 
кг. 3.998,- © fra 2.598,- Ө 1998,- @ 
0: 


Kamera sett 1.998,- 


RC Produkter 2 
Norsk Sciens fiction Film Star Wars : R2-D2, 


Web-cam, Projektor, DVD 
Mal Internet hastighet 1.2 | үа кг. 1998,- © Video 


Security & Surveillance 
Service Plans 
Television & Video 
Video Game Consoles & 


Search | p; әл, Stort- Ute/inne Arun 
Bil-elektronikk G-skala Tog - bike (250w) RC Tiger & Leopard-Tank | Video Projectors 
Bát-elektronikk a = Sne-kjering 53 cm lang. Skyter Kuler 30m Wearable Technology 
el-ATV ~ ~ 6,7hk kr. 13,998.- о Roboter eBook Readers & ring 4 
med Roboter Accessories 
Skilt М Selv-balanse | Household Batteries, | | : | Musical 
(16 аг) Gressklipper Robot. Chargers & Accessories Headphones Office Electronics Office Supplies Smart Home instruments 


kr. 3998,- Ө 


Atonomous 
kr. 999,- 


Power Accessories 


Don't design complicated layouts. Don't reinvent 


the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


ЕУ 


€106 / night 
CHECK-IN 
3/10/2021 


GUESTS 
1 guest 


€106 x 1 night 


Service fee 


Total 


vé 


CHECKOUT 
3/11/2021 


Report this listing 


Reserve 


€106 


= 


€106 / night * 5.0 (12) 
СНЕСК-ІМ CHECKOUT 
3/10/2021 3/11/2021 
GUESTS 
1 guest м 


Reserve 


You won't be charged yet 


€106 x 1 night €106 
Service fee €0 
Total €106 


#5 Report this listing 


Don't design complicated layouts. Don't reinvent 


the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


= 


Inaugural Address by 
President Joseph R. 
Biden, Jr. 


JANUARY 20, 2021 + ме AND REMARKS 


The Inaugural Address of the 46th President of 
the United States, as delivered at the United 
States Capitol. 


Looks 100% like a 
link, but isn't опе! 


Inaugufal Address by 
President Joseph R. 
Biden, Jr. 


JANUARY 2p, 2021 * SPEECHES AND REMARKS 


The Inaugurgl Address of the 46th President of 


the Оп ха States , as delivered at the United 
N States Capitol. 


Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: 
between 200 and 500 ms 


Professional 
Communication For 
Your Team 


With Grammarly Business, every member of your 
team can compose credible, mistake-free writing that 
makes your business look good. 


Professional 
Communication For 
Your Team 


With Grammarly Business, every member of your 
team can compose credible, mistake-free writing that 
makes your business look good. 


Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: 
between 200 and 500 ms 


In forms, align labels and fields in a single 
vertical line, to make the form easier to scan 


= 


Contact support 


Question 


Select your question... 


Tell us more—how can we help? 


Your email address 9 


Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know ey 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: 
between 200 and 500 ms 


In forms, align labels and fields in a single 
vertical line, to make the form easier to scan 


Offer users good feedback for all actions: form 
errors, form success, etc. [web apps] 


Contact support 


Question 
Select your question... v 


A Please choose a question to help us better assist you. 


Tell us more—how can we help? 


А Please tell us more about your question. 


Your email address ® 


A 


А Please enter a valid email address for us to contact you. 


UX RULES FOR USABILITY 


1 Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know Ж 


Today 


Walk dog 


2 Make your call-to-action the most prominent 
element, and make the text descriptive 


Call Steven 


Build UX lecture 


3 Use blue text and underlined text only for links! 


4 Animations should have a purpose and be fast: 
between 200 and 500 ms 


5 Informs, align labels and fields in a single Today 
vertical line, to make the form easier to scan Walk dog 


Call Steven 


6 Offer users good feedback for all actions: form 
errors, form success, etc. [web apps] Build UX lecture 


7 Place action buttons where they will create an 
effect (law of locality) [web apps] 


S The Al assistant that 
grows your money. 


Automate banner 
production in minutes 


Greenlight makes it easy to leave 


feedback on any website. 


The All-In-One Toolkit for 
Working Remotely. 


2 


в Use a descriptive, keyword-focused headline on your main page. Don't be vague ог fancy! 


Join the solar 


energy revolution 


The way you work 
15 evolving. Is your 
hiring software? 


Meaningful Insights 
Without the Click of a 
Button. 


Is design growing 
your product? 


2) Basecamp 


ж“. “с заявя 
“extremely user friendly” "perfect solution for rem 


"а... 
ote teams” “truly amazing!” 


The All-In-One Toolkit for 
Working Remotely. 


Before Basecamp: You're wondering how you'll quickly transition your team to remote 
work. People are stressed, work feels scattered, projects are slipping, and it’s tough to 
see + manage everything. After Basecamp: Soon you'll be feeling like “hey, we got 
this”. Everything will be organized in one place, your team will be working together 
(even though they're apart), you'll be on top of things, and a sense of calm will set in. 


4,323 companies signed up in the last week alone! 
Create a place in Basecamp for each project or team. 


Honcho Co 
У Get set up to work remote 
руди everyone whos Q 
working on Hue project 21900 --- 


Message Board To-dos Group Chat 
Qin o Software. 
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QAM e o. 


We wara to malo sro youre 


conference ape we ware to ue мне Den 
9g а Өш 
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Mera gong remote o Order laptops lor people whe 
wah everthing that's gang. seed: 


Mowitworks Before after Gotclionts? Pricing Support Signin EL 


O avocode тосист + зоштом + мам” тисе 


Y 
g working wi 
design files 


+ Hand-off ~ Inspect ~ Getassets ~ Review 


в Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! 


КЕ Only include relevant information, efficiently! Cut out fluff and make the content 100% clear 


- c- ENS 
Ts 


Google € оно FRONTIER Panasonic. 


Schodulo Automatic Chock-ins. Docs & Filos 
F) Mon Me23 —— ——— A pl my Monde i ме 
un Got any remote work tips? quem 
93000 = |же 
How are inge going o far? = 
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cir 
Project Activity Use dedicated foo fy 4; 
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Order laptops for people who need 


One place, not all over the place. 


Because of COVID-19, your company is likely scrambling to figure out how to transition 
to remote work. It may feel daunting, but youre in the right place with Basecamp. We 
built Basecamp to run our entire remote company - and we've been working remotely 
for 20 years. We know what it takes, we do it every day, and we built those learnings 
into Basecamp. Tens of thousands of other companies rely on Basecamp every day. 


Basecamp is different - take a deeper look at how it works > 


We literally wrote the book on 
working remotely. 


We don't just make software for remote work; we wrote a 


E popular and influential book about working remotely too. 

R M REMOTE shows both employers and employees how 
they can work together, remotely, from any desk, in any 
place, anytime, anywhere. Avoid common pitfalls, learn 


кіметі Т best practices, and get up to speed quick. 
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ооо == Mando Dewgns 
=== and let others take 
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Impect Designs 
Copy-paste code жа: 
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Everything you need 


to grow online; 


^ 
OL 


Simple tools for your big ideas. Start your free 
website trial today, no credit card required: 


The only VPN you'll 
ever need 


ClearVPN helps you access any content, secure your 
online interactions and bring your internet life to a whole 


new level with just one tap. 


в Use a descriptive, keyword-focused headline on your main page. Don't be vague ог fancy! 
99 Only include relevant information, efficiently! Cut out fluff and make the content 100% clear 


a0 Use simple words! Avoid technical jargon and "smart-sounding" words 


The modern 
way to build 
for the web 


Webflow empowers designers to build 
professional, custom websites in a 
completely visual canvas with no code. 


Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! 


Only include relevant information, efficiently! Cut out fluff and make the content 100% clear 


Use simple words! Avoid technical jargon and “smart-sounding” words 


Break up long text with sub-headings, images, 
block quotes, bullet points, etc. 


90% of Startups Fail 


Here are the most common reasons why startups fail. D 


Top 20 Reasons Startups Fail 


> E A 3 4 


I'd like to attract your attention on the top 2 reasons. 
“No Market Need” and “Ran Out of Cash”. 


Those are actually closely related! If a startup is building a product nobody 
wants they will not get sales and thus will run out of cash. 


So to put it bluntly, most of startups fail because 


they build something nobody wants. Wow! 


But still, a lot of startups raise money from investors. Isn’t it a sign that 


they’re on the right track? Well, no... 


There seems to be an over-emphasis on money-raising in the startup 
industry. But raising money does not guarantee success. There are tons 
of unprofitable startups that raised millions of dollars. 


Conclusion 


If you have to remember one thing out of this article, it is: TALK TO USERS! 


* Talk to users before building 
* Talk to users while you're building 


* Talk to users after you've built 


А 


JONAS.IO 


SCHMEDTMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


THE WEBSITE-PERSONALITIES- 
FRAMEWORK 


HTML 


THE WEBSITE-PERSONALITIES-FRAMEWORK 


Distilled into countless 
web design rules that 
we just learned 


100s of well-designed RULES SHOULD BE APPLIED ACCORDING 
sites deconstructed TO SELECTED WEBSITE PERSONALITY 


“ Distilled into 


7 website personalities 


THE WEBSITE-PERSONALITIES-FRAMEWORK 


THE 7 PERSONALITIES How do you want website to 


appear to users? What “vibe” do 
you want to transmit? 


Y 


Choose one of the website 
3 Plain/Neutral personalities accordingly 


1 Serious/Elegant 


2  Minimalist/Simple 


4 Bold/Confident y 


Apply personality traits to each 
design ingredient 


6 Startup/Upbeat A "4 y y y V 


7 Playful/Fun 


5 Calm/Peaceful 


Typography Colors Images Icons Shadows  Border-radius Layout 


RINOKAPELLE Home Collection Lookbook About Contact == 


Г| OVERVIEW Design for luxury and elegance, based on thin serif typefaces, LUXURIOUS and 


golden or pastel colors, and big high-quality images CONTEMPORARY APPEAL, 
— for ENERY WOMAN 


ёз INDUSTRIES Real estate, high fashion, jewelry, luxury products or services 


7 Web design ingredients we learned about 


Ж TYPOGRAPHY Serif typefaces (especially in headings), light font weight, 
small body font size 


& COLORS Gold, pastel colors, black, dark blue or grey 


ий IMAGES Big, high-quality images are used to feature elegant and 
expensive products 


LATEST COLLECTION 


ICONS va’ Usually no icons, but thin icons and lines may be used c— 
Wier 

£ SHADOWS © Usually no shadows 2020 

@ BORDER-RADIUS © Usually no border-radius а 


4% LAYOUT A creative and experimental layout is quite common 


Tradicné slovenské 
domy po novom 


Т N 


y 


a 
= "diae 


Ргауу sedlovy dom Dokonalost slovenského dizajnu Modernizácia typickych tvarov 


Tradičná ľudová architektúra so sedlovou 
strechou v modernom prevedení 


Tradičné a zároveň moderné Čistý a prírodný interiér Industriál i retro v jednom 


V duchu tradície s pridanou hodnotou Utulný a praktický ako stvorený pre rodinu Správne použitie pvkov, materiálov a 


moderných prvkov - ohľaduplnosť k prírode zdravé vnútorné prostredie plné sinka farebnosti, ktoré vytvárajú harmonické a 


okolitej zástavbe a ľudom radosti a pozitívnej energie moderné riešenie 


Moderné slovenské 
domy s odkazom 
minulosti 


jim \ 
RO LU ЛТ ДШ ЫЬ 
ДИ ИД А УДИНЕ 
ШЕТЕЛ О за У `+ 
i Wu rur 
АМА И 


» 
2 úcty К predkom, ich 


intuitivnemu a müdremu 
pristupu vystavby, ale i 


spósobe Zivota, hodnót a lásky 


"У © э % | 


DISCOVER 


THE PALACE 


From the seat of power to a museum 
of the history of France 


THE ROYAL TENNIS COURT 


THER 


OYAL TENNIS COURT 


On 20 June 1789, the Royal Tennis Court of 


THE ESTATE OF TRIANON 


ш: Ticketing Shop Donate  Youare- EN~ Q 


PLAN YOUR VISIT WHAT'S ON 


[3 02/07/2021 = 9°C - 13°C 


THE GARDENS 


The art of perspective 


THE PARK 


A place of intimacy A haven of greenery 


LIFE ON THE ESTATE 


LIFE ON THE ESTATE 


GAMES AND SPORT AT 


ACQUISITION 
VERSAILLES | tacq 


iscover the latest acquisitions by the Palace of 


rsailles 


22,000 ARTWORKS TO DISCOVER ONLINE 


SHOP SAMPLES TRIAL ABOUT HELP 


MODERN PET WELLNESS 8 LIFESTYLE 


Human grade, certified 
organic, plant-based 
for your canine. 


SHOP NOW 


OUR PRODUCTS 


Dig through our human- 
grade wellness and 
activity-based treat 
products to keep your 
pup happy and healthy. 


SHOP NOW 


INGREDIENTS THAT MATTER 


Organic, Plant-Based 


ANY TREATS 6 SAVE 5: SCOUNT ІМ CART 


ACCOUNT 


dy 


? 
Net Wi. 6.9 oz. (195g) j Net Wt. 6.9 oz. (1952) á 


Trekking Tails - Canine Treats On Vacay - Canine Treats 


$19.50 $19.50 


ETHOS 


From one dog lover to 
another 


Fetching Fields began when our founder noticed a clear lack in 


healthful and socially responsible canine products. 


READ MORE 


CART (0) 


Sound Contact 


ia v. E AMENS CK + 
SUUS AERE SEM 


' | Ы d е, 
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| Миа > А a” 
ES d SEN мб? E E. А а i 


Change the way you live life, closer to nature. ` 


1 OVERVIEW Focusses on the essential text content, using small or medium- 
sized sans-serif black text, lines, and few images and icons 


"шпішәлі *ejqeuiejsns “enpo 


E 


INDUSTRIES Fashion, portfolios, minimalism companies, software startups 


Nr. 03 


Nr. 01 Nr. 02 


Live in ark Work in an ark Relax in an ark 
Ф TYPOGRAPHY Boxy/squared sans-serif typefaces, small body font sizes 
& COLORS Usually black or dark grey, on pure white background. Usually 
just one color throughout the design What's Ark- Ark-Shelters are prefabricated, fully 
Shelter? ue : : 
finished, modular units. By a lake, deep in 
іі IMAGES Few images, which can be used to add some color to the a forest, at the edge of a field, a steep 
design. Usually no illustrations, but if, than just black mountain hill or your city rooftop! Make 
your dream come true, installed in one 
| | | | day, no extra on-site work. 
ICONS Жж Usually no icons, but small simple black icons may be used 
SHADOWS © Usually no shadows 2.2. 7:27 
@ BORDER-RADIUS © Usually no border-radius татын. 


CHOOSE YOUR PURPOSE 


& LAYOUT Simple layout, a narrow one-column layout is quite common 


Ark-Shelter to live in closer to nature 


Clippings Platform v For v Projects Book a demo Log in 


The new way for 
interior professionals 
to buy furniture 


Book a demo > 


T n mme um Find furniture for every 
Е. type of project 


650+ brands Ф Trade pricing 

Browse millions of products See trade pricing and lead 
from the world's times right away. No need to 
leading brands request a quote 


Q Source from anywhere 77 Free samples 
Can't find it on Clippings? Get free fabric, wood, marble 
Add items from any website and rug samples 
with the Clip Tool. 


We work with... 
Interior designers 


Hospitality 
The Silo Restaurant, London by Nina+Co 


Book a demo 


How will you and your project benefit from Clippings? Get your 
personal introduction to the platform in a 15 minute demo. 


exyte 


HI! I AM TOMAS SEBASTIAN 


Pretty code by handsome people Designer with badass skills 
Mobile, AR, VR, AI, Blockchain — we have it based in Prague. 


Contactus › — LEARN MORE 
ф " 


Enter email > 


Somewhere between staring at the screen апа 
tilting my head the magic is done. 


Rated 5.0 on Clutch + 9000+ stars on GitHub + ignore the nagging self-doubt, shut 


it down and ship it when needed. 


94% employee retention — 
rate 


1.5 years of cooperation + 
on average 

Har / Т ON T3. 
mappy € [ )yCes D ( 


happy software. Hire а team 


100% office-based team + 


50+ successful projects + 


More than 
a designer 


Services pu 


Hire a team of programming experts and design Keep it stupid Award-winner Keen to learn 


professionals to design, develop, and deploy your 


project. 
It doesn't matter whether your task regards smart contracts, iOS/Android 
development, or VR kits like Oculus Rift and HTC Vive — our team will 
help push your project from idea to deployment 
jn Laser Beam Dedicated Team Your own dedicated development team, built | - 


according to your needs 


m———' Work hard Play hard 
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Z TYPOGRAPHY 
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@ BORDER-RADIUS 


& LAYOUT 


OVERVIEW 


INDUSTRIES 


COLORS 


IMAGES 


ICONS 


SHADOWS 


Design that gets out of the way by using very neutral and 
small typefaces, and a boxy, structured, and condensed layout 


Well-established corporations, companies that don't want to 
make an impact through design 


Neutral-looking sans-serif typefaces are used, and text 
is usually small and doesn't have visual impact 


Safe colors are employed, nothing too bright or to washed-out. 
Blues and blacks are common 


Images are frequently used, but usually in a small format 


vw Usually no icons, but simple icons may be used 


© Usually no shadows 


© Usually no border-radius 


Structured and condensed layout, with lots of boxes and rows 


Think Digital Summit Portugal 


November 4 
#ThinkPortugal 


Register now — 


Inside IBM 


The new IBM 215 EAM 


Cloud without com promise , for businesses Rapidly deploy access to critical 
of all sizes applications for remo te wor kforces 
he new IBM 215 sir Register to q 0 
> lal > 
Technolog 
nalytics -> Artificial intelligence > 
oud ng > T astri > 
Mobi зу > ty > 
Business nee d 
Bus [ ns > Col > 
Cont nent > Cust d CRM —> 
luman resources > Mark 1 sal > 


Explore product trials and offers 


View more offers -> 


5 5: Products € Solutions ~ Services & Consulting v Learn & Support v Explore more ~ 


change without compromise 


1 | +-> 
Blockchain > 
IT ement -> 
f jevelopment -> 
erce > 
F e 
pply chain r nt > 


Current conditions have exposed dire flaws 


in global supply networks 


Read the IBV report to be ready for future 


disruptions — 


From Bangkok to Berlin — deep technical 


training is coming to a city near you 


Explore the world while you hone your skills 


Prepare data and build AI and machine 


learning models on your desktop 


Start your free trial now -> 


Move and share big files and data across 


vast distances at high speeds 


Try a free 90-day subscription 


> 


| Microsoft Microsoft 365 Office Windows Surface Xbox Deals Support 


® A H 


Buy Xbox games Shop Surface Choose your 
and consoles devices Microsoft 365 


Bundle and save up to $460 
Work and play virtually anywhere when 
you bundle a Surface Pro 7 with choice of 
select Type Cover. 


Save up to $800 on select 
Surface Laptop 3 


Save $400 now when you buy a new 
Surface Laptop 3 and get up to $400 back 
when you trade in an eligible device. 


te GAME PASS ULTIMATE | 


Xbox Game Pass Ultimate 


Xbox Live Gold and over 100 high-quality console and PC games 
Play together with friends and discover your next favorite game. 


Compare all plans > 


For business 


ail 


Tax season savings 

Save up to $300 on Surface Book 3 for 

Business. platform designed to help people 
connect, focus, learn, and thrive at work. 


Introducing Microsoft Viva 
Discover the new employee experience 


гп 


All Microsoft p E 


Surface deals 


Select Surface devices are on sale now—save while supplies last. 
For help choosing the right Surface, book a personal shopping 
appointment with a Microsoft Store associate. 


Book an appointment > 


шш 
т E Fe4 
Shop Windows Find your next PC Shop Business 
10 
Qe 
— 


Do more with Windows 


Shop tablets, laptops, all-in-ones, gaming 
PCs, and more. 


Never miss a beat 


Discover the latest audio from Surface, 
featuring ultra-comfortable design, 
immersive sound, and all-day battery. 


Microsoft Teams 
Chat, meet, call, and collaborate 


Microsoft Ignite 


Attend digitally to connect with experts, 
explore the latest, emerging tech, and 
discuss developing topics with a 
worldwide community. 


›ге 


Microsoft's response to COVID-19 


Read how we're responding to the COVID-19 outbreak, and get resources to help. 


Learn more > 


Porsche.de My Porsche 


Modelle | Fahrzeugsuche Online kaufen 


Soul, electrified. 


Der neue Taycan Cross Turismo. 


Modelle 


718 


Ab EUR 56.372,00 inkl. MwSt. 


‘See 


- Y ~ 
E Konfigurieren ET Modelle 


Panamera 
Ab EUR 93.707,00 inkl. MwSt. 


[2 Konfigurieren У Айе 


PORSCHE 


Login & Registrierung 


Händlersuche [PLZ › 


Suchbegriff eingeben Q 


Motorsport & Events Service & Zubehór Unternehmen Car Configurato 


911 


Ab EUR 106.352,00 inkl. MwSt. 


(2 Konfigurieren 


Macan 


| "AbEUR 61.132,00 inkl. MwSt. 


P^ ди.“ 


(2 Konfigurieren > Alle Modelle 


Finden Sie einen Porsche in Іһгег Náhe 


Y me: | / 253 a | 


> 718 Modelle kaufen 


Beratung & Services 


Modelle vergleichen 


> 911 Modelle kaufen 


Handlersuche 


Beratung & Services + 


Verbrauch/Emissionen*Stromverbrauch море 28.7 KWh 100 km 
C02-Emissionen kombiniert: O g/km 


Taycan 
Ab EUR 83.520,00 inkl MwSt. 


(2 Konfigurieren | > Alle Modelle | 


Cayenne 
Ab EUR 77.792,00 inkl. MwSt. 


(2 Konfigurieren 


€ TRA ES, 


Porsche Financial 
Services Kontakt 


DESIGN BUILDERS 


А home built aro. ой Ноте 


— 


Splashing 
Out 


See what your money gets you 


Every Design Builders 
home is unique 


We design and build one-off architectural homes throughout the North 
Island. No existing plans, templates, or catalogues; instead, we work with 
you to create a unique home designed and built just for you, inspired by 


you. 


The homes we create are all different, but they start the same way: with a 


blank sheet of paper and a client who wants a great original home. 


You might think that a home designed and built the way you want is out 
of your reach, but with Design Builders, you can afford to think 


differently. Our process is built around you, including your budget. 


News & Events 


_ Our Locations v 


Е 


Get Inspired Why Design Builders Showhomes Let's Get Started News & Events Contact Us 


u) 


Proudly New Zealand owned and operated with a nationwide 


work in several locatior 


View locations 


NER. м ~ 
: showhomes. | 


Be inspired at 


See all sho 


-= 
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PERSONALITY 04 - BOLD/CONFIDENT 


OVERVIEW 


INDUSTRIES 


TYPOGRAPHY 


COLORS 


IMAGES 


ICONS 


SHADOWS 


LAYOUT 


Design that makes an impact, by featuring big and bold 
typography, paired with confident use of big colored blocks 


Digital agencies, software startups, travel, "strong" companies 


Boxy/squared sans-serif typefaces, big and bold typography, 
especially headings. Uppercase headings are common 


Usually multiple bright colors. Big color blocks/sections are 
used to draw attention 


Lots of big images are usually displayed 


© Usually no icons 


© Usually no shadows 


© Usually no border-radius 


ww All kinds of layouts, no particular tendencies 


E * 
e ха y е 
t eS -— a (| 
ОРВАНУЕЖ er 7 
X A je, | == 
Nes > 
M 4A X | 


PREDICT. 


Shop our kits 


Emergencies can happen without It’s not just about the kit, but The must-have 
warning, but JUDY can help people also the customized content and emergency kit to keep you 
be more prepared than ever. education they offer. safe during a disaster. 


People Ehe New York Times GMA 


Compare them all > 
a WE 
THE SAFE THE MOVER MAX THE STA 
$295 $195 $60 
Add To Cart Add To Cart Add To 


Pay in t-free installments Pay in est-free installments Pay in full or in 4 interes 
Me 75v wi e а Gann n more а 75v wi zh = En n more of $15.00 with shop. 


Dover 


GET STARTED 


Build your recruiting 
engine with Dover. 


No more juggling recruiting tools—Dover finds and schedules candidates you actually 
want to talk to, at a fraction of the cost. 


GET STARTED 


у BAS 
Join the 100+ companies relying pelt сай ® 


on Dover to find the best talent 


passion. 


Create ч Мо!ап & Со 
a website. 


Start with award-winning templates, then 
customize to fit your style and professional needs. 


Nolan & Co is a digital рг 
agency that focuses on st 


and design. 
Creative Services > 


ALL TEMPLATES > 


We discover 


| => Audacious 
candidates you 


actually wantto е goals 3 


talk to. | 
Dover uses а robust calibration process to deeply c» 


understand your requirements. 


Sell online. 


Then, our system evaluates prospective candidates 
on 50* data points so we can find qualified 
candidates who are the best possible fits. 35 through execution and results; Matter 


From marketing strategy and leadership 


Made produces reliable growth for 
scale-ups and large enterprises. 


m ан 7 814 | \ 
Aurum Bag 


Dover helped us hire two phenomenal engineers 
for our first DevOps and Test roles. The product 
held up our high quality bar — and working with 


thair taam wac fantactic! 


= +. 


[| OVERVIEW 


& INDUSTRIES 


Z TYPOGRAPHY 


& COLORS 


па IMAGES 


ICONS 
27 SHADOWS 
@ BORDER-RADIUS 


& LAYOUT 


For products and services that care about the consumer, which 
is transmitted by calming pastel colors and soft serif headings 


Healthcare, all products with focus on consumer well-being 


Soft serif typefaces frequently used for headings, but sans- 
serif headings might be used too (e.g for software products) 


Pastel/washed-out colors: light oranges, yellows, browns, 
greens, blues 


Images and illustrations are usual, matching calm color palette 


Icons are quite frequent 


Жж Usually no shadows, but might be used sparingly 


Some border-radius is usual 


w All kinds of layouts, no particular tendencies 


BYRDIE 


FASHIONISTA 


5000+ 5-star reviews 


Quiet your mind and 
calm the storm. 


Sleep tight and wake 


MNDFL @ Work CERTIFICATION 


© donut. Learn Blog About Us Get started 


MNOFL 


Say goodbye 
Space for you to idle money. 


to bre ath e Earn 4% yield with DeFi-powered saving. 
LJ 
| | - © Available on iOS 
A global community of expert teachers and dedicated - 3 


practitioners who are all about spreading goodness. 


Take the quiz 


Since its inception, MNDFL has been at the forefront of the 
modern mindfulness movement, providing meditation 
experiences and relevant mindfulness content for the modern 
human. 


MNDFL @ WORK CERTIFICATION 


Healthy doesn't have to be hard. е S URS eS We make money move. 


We make it easy. 


Learn more © 
000 
Take the quiz Get nutrients that work Stick with it long term 
BENEFITS OF MEDITATION 
Tell us a little about yourself. We're good Get your personalized recommendation. Keep the conversation going. We'll 


listeners. Backed by science and delivered to you adjust as your health needs change We enable you to feel good А 
Fast & Easy High Yield Secure 


Connect your bank account and 4% APY through the power of Over $3+ million earning interest 
start saving in under 5 minutes. decentralized finance. safely thanks to best-in-class 
lending partners. 


A routine tailored to you 
Reduce stress 

We'll help you create a health plan with vitamins, supplements, and more that help you feel your best 

Become BFF with your mind and learn 

how to effectively cope with the tough ө 

stuff - like anxious thoughts and difficult H 1t rk 

emotions. Hi, present moment awareness. фи) Wo S. 

Bye, Obsessiveness. 


today and support you long-term. 


Automate your saving in under 5 minutes, then brag about it to your friends. 


Learn more Q 


Anne's plan 


Full-time mom 


Anne's daughter keeps her busy, but she tries to work Increa se pr duct ivity 


out and eat healthy most days 


$ $6,291.59 (5) 
Mm $429.596182374 Earn Yield 


Generate fixed or variable interest in 


Let's face it, there is so much work to be 

8 PROBIOTICS for digestion* done in the world and it can be 
overwhelming. Create mental and 
emotional space so you can show up 
more fully for both your internal and 
external world. 


Link your bank account to add funds 


instantly. real time at rates up to 20x your bank. 


DH) PROTEIN for post-workout recovery” 


() ELECTROLYTES to support hydration* 


CURRENTLY EARNINO 


® 4% apy — & 


А Automate Cash Out 
Reduce depression | 
Collect spare change or schedule 5702 о! $10 Move your savings in and out freely 
recurring deposits. = COLLECTING with no fees or fixed terms. 


Studies show that meditation, especially 
when paired with exercise, can lead to a 
40% decrease in depression. Turns out 
that the mind body connection is real - 
as is science. 


[| OVERVIEW 


& INDUSTRIES 


Z TYPOGRAPHY 


& COLORS 


ий IMAGES 


ICONS 


£ SHADOWS 


Widely used in startups, featuring medium-sized sans-serif 
typefaces, light-grey backgrounds, and rounded elements 


Software startups, and other modern-looking companies 


Medium-sized headings (not too large), usually one sans-serif 
typeface in whole design. Tendency for lighter text colors 


Blues, greens and purples are widely used. Lots of light 
backgrounds (mainly gray), gradients are also common 


Images or illustrations are always used. 3D illustrations are 
modern. Sometimes patterns and shapes add visual details 


Icons are very frequent 


Subtle shadows are frequent. Glows are becoming modern 


Ө BORDER-RADIUS Border-radius is very common 


& LAYOUT 


Rows of cards and Z-patterns are usual, as well as animations 


% Connect 


Payments for 
platforms and 
marketplaces 


Connect is a set of programmable APIs and tools 
that lets you facilitate payments on your software 


platform, build a marketplace, and pay out sellers 


or service providers globally—all while having 
Stripe handle payments compliance. 


Contact sales > 


Booking.com ӛт 


МапоМапо 1 shopify 


How it works 


TOTAL SALES 


TRANSACTIONS 


treatwell 


WiX 


The easiest way to facilitate payments 


and pay out recipients 


e е 


Onboard users | Accept payments 
Onboard your users and verify Accept and facilitate payments 
their identity. on your users' behalf. 


Onboard and verify your users 


Whether you use Connect's prebuilt, optimized 
Uls or build your own custom flows, it’s easy to get 
your users up and running quickly. Stripe handles 
identity verification to meet Know Your Customer 
(KYC) and compliance requirements. 


v Optimized to minimize user error and increase signups 
v Localized for 35+ countries in 14 languages 


y Automatically updated as local verification requirements evolve 


N 


| Pay out users 


Split payments, transfer funds, 


and send money. 


MARKET 


| Manage platform 


Manage payments and users on 
your platform or marketplace. 


Is design growing 
your product? pe 


А 
% 


a? 
я Е ай 
Getintouch > «ке enm сме 
хх MS 
AG f е «хе? 


с. « 
* pr 
~ 9% 
uw Ж ~ 
> а / 
Great interfaces set your 
business up for growth 
numbe 1 | jit duct h areat 
) І It [ | 
А Boost productivity 
2 Increase confidence 
42 Scale your product 
We design great user % 
interfaces that empower 
people and drive value 
| І > м " 
1 1 1 hy e М y 


(a Robin Humphreys 
Es 


Native mobile apps SaaS applications Enterprise software 


(e grammarly business Pricing Solutions ~ Security My Grammarly 


Professional 
Communication For 
Your Team 


With Grammarly Business, every member of your 
team can compose credible, mistake-free writing that 
makes your business look good. 


Get Grammarly Business 


magazine editor and Grammarly 


Hey, Connor here! I'll be your 


trusted human advisor from 
Grammarly! How can I help? 


Your Writing Reflects Your Business 


Every email, web page, and social media post makes an impression on your customers. 


With Grammarly, you can be confident it's the right impression. 


(>) Watch Full Video 


Go Beyond Spelling and Grammar 


High-quality writing is more than just mechanics. Grammarly Business goes deeper with 


real-time suggestions for improving readability, word choice, writing style, and tone. 


e 8 


Соггесіпеѕѕ Clarity Engagement Appropriate tone 
Eliminate grammar, spelling, Make every sentence Find vivid words to enliven Choose the right tone and 
and punctuation errors concise and easy to follow. each and every message formality level. 


Align Your Team With Your Company's Style 


With Grammarly Business, you can create a company style guide to keep 


every team member's communication clear and on-brand. 


о Staci, on the support team, resolving а customer's issue 


Company Style Guide 


Linear 


Linear Release 2020.12 + Series A 


The issue tracking 
tool you'll enjoy using 


Sign up for free > 


Ў Compound == Retool g) graphcms й askSpoke 


фм», P4 Albert Єў draftbit 


An experience you'd expect from a 
professional tool. 


Built for speed Keyboard first design For software teams 


Sign up 


> 


ы 
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PERSONALITY 07 – PLAYFUL/FUN 


OVERVIEW 


INDUSTRIES 


TYPOGRAPHY 


COLORS 


IMAGES 


ICONS 


SHADOWS 


Colorful and round designs, fueled by creative elements like 
hand-drawn icons or illustrations, animations, and fun language 


Child products, animal products, food 


Round and creative (e.g. handwritten) sans-serif typefaces are 
frequent. Centered text is more common 


Multiple colors are frequently used to design a colorful 
layout, all over backgrounds and text 


Images, hand-drawn (or 3D) illustrations, and geometric 
shapes and patterns are all very frequently used 


Icons are very frequent, many times in a hand-drawn style 


Subtle shadows are quite common, but not always used 


BORDER-RADIUS (2 Border-radius is very common 


LAYOUT 


w All kinds of layouts, no particular tendencies 


Kurumsal Yüz Үйге Eğitim Online Eğitim 
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d 


Minidil Online Özel Derslerle 
Tüm Türkiye'de 


ÜCRETSİZ DENEME DERSİ © DETAYA СЇТ 


Minidil 
V d ZAS Etkinliklerinden 
fe f = 2 id | | ) ' 
! “Ж ү 
ҮЕАВ ОЕ ТНЕ Drama Kulübü Үй TÜMÜNÜ GOR > 
DRAGON Sonu Gosterisi 


Джа 
Ma Vinci's Assi nt’ 


Alice in Wonderland md adu egitsel tiyatro 


Custom 
Printed 


T-Shirts BEACH ' 


Real Thread makes it easy to order super soft, stylish custom 


printed t-shirts that get your message into the world. 


HOTEL zaza 


Browse products + Contact a printing pro 


e в 


Low minimums Lightning fast delivery 


Order as few as 20 shirts to get your 


project started. shirts by February 3 


Talk to a human | 
Our team of apparel experts 
are always an email, phone é 


call, or even a click away. 


Seriously, try us @ 


“ 4 2 
= See how we do it А 


Our Products 


Add-On Service 


Short Sleeve Tees Tag Printing 
Tank Tops Hem Tags 
"ү 4 5 T Long Sleeves Folding & Polybagging 
G 0 Comp, Ny Hoodies Foil Printing 
~ Face Masks (77 Hang Tags 
View all products See all add-ons 


Try our 2-day service and get your 


Order blank or custom 
branded face masks 


CLUB | = 


E) 


Money back guarantee 


Count on us being on time with each 
and every order. 


Don't settle for 
custom shirts 
no one will 
wear. 


Your brand is too valuable to print 
on scratchy, ill-fitting shirts that no 
one will wear. 


Real Thread's library of soft shirts, 
unique print options, and simple 
order process make it easier than 


ever to order shirts you'll love and 


wear proudly. 


-- 


© Honk 


Real-time 
messaging. 


Honk is the all-new way to chat with your friends 
in real time, with messages shown live as you type. 


Dennis e 


Just enjoying some dinner! 


@ App Store 


Stop Waiting Around 
for Messages 


"se" de sent 
а ме гг уи Гор 


а | з јај ғ |а| "| | |К |) 


пеу 


No Send Button 


Never hit send again. Just type a message and 
clear it to say something new. 


zw $ 


G = © co E 
E Ф ~ 


Keep Your Friends Close 


See when all your friends are online and free to chat 


No Chat History 


Only two live messages, instead of thousands 
that build up over time. 


Live Typing 


Goodbye sending. Hello typing. 
Messages appear live as you type. 


React in Real-Time 
with Huge Emojis 


ce <-> 


T 
@ Y А. 


Just Honk 


To get someone's attention fast, just Honk them. 
Once, twice, or as many times as you want. 


Be Present 


Always know when someone's in a chat 
with you - and the moment they leave. 


nan 


Join Honk 


Get Honk on iOS and stay updated via Twitter 


TOL 
@ App Store Y Twitter 


Y 


YUMMY NATURAL GRAVY 


(A АРИР asove meas 4 О 


YOUR DOG'S 


An 


. BEST LIFE IN œ- 


EVERY BITE. ' y 


SHOP ALL 


- 


Е 8 


ONLY THE BEST 
IN OUR BOWLS 


HIGH PROTEIN 


116 PROTEIN IN EVERYIOO KCAL 


LOW CARB 


AG CARBS IN EVERY 100 KCAL 


RICH IN COLLAGEN AND HEALTHY AMINO ACIDS 


kikk 


Lola's parents and 
business partners 


BY DOG 
PARENTS FOR 
DOG PARENTS. 


Ruth, Javier $ Lola 


READ OUR STORY 


lela 


Chief Pup Officer 
5 Co-founder 


ADVANCED: COMBINING PLAYFULNESS AND BOLDNESS 


More: VEM 
Boxy/squared sans-serif 4 
typefaces 
Big and bold typography Bold/Confident 
Bright/flashy colors 
| INJECT SOME PERSONALITY TRAITS 


_ Serious/ _ Minimalist _ Plain/ _ Startup/ , „2 
SERIOUS Elegant [Simple Neutral Upbeat > PLAYFUL 


| Моге: 


Моге: Colorful 


Calm/Peaceful Rounded corners, 


Headings using soft serif typography and icons 


typefaces 


Pastel/washed-out colors | Shadows 


| Illustration 
Illustrations ustrations 


CALM 


hitchd Howitworks About Pricing Login Start your registry А Vercel Templa ytics Pricing Contact оди 


= Total 


Guests fund your 
honeymoon. 
Beautiful. Fast. Simple. 


The simple, modern, and meaningful way to fund your 
adventure of a lifetime. Your guests are going to love it. 


California, Las Vegas 


Zoe 


Start your registry View sample registry & Ma rl 


Welcome to ouf honeymoons 


Romantic dinner at 


Free trial. No credit card required 


Пн BEST ~ 
va MOBILE Y, Start Deploying 
NZ EXPERIENCE Y, 
` > 
N N. 
~ @rerinervoo he 


Vercel combines the be 
Ou 


Entrepreneur y €) REFINERY29 INSIDER Qbc rs €CBS FOX t developer experience with an obsessive focus on end-user performance. 


platform enables frontend teams to do their best work 


г Big and bold typography 


EXPLORE THE VERCEL WAY 


© Big color blocks 


Here's how it works 


01 О да 
© 


Personalize and create gifts Launch апс Паге with guests Кесе contributions to your bank 
Add photos and a welcome message. Create Once you're пей, launch your registry and Бой че heartfelt contributions straight to your Develop 
any kind of gift you can imagine. shag® your Hitchd URL with guests. bank account. No strings. 


Start with the developer 


Explore how it works 


ove Next.js, the open source React frar ercel Ve ny frontend app. Start by 
juilt t er with Google and Facebook. Next.js powers deploying ro confi to our global edge network 
SJ websites like Airbnb апа Twilio, for use cases in e- Scale dygffimically to millions of pages without breaking a sweat 


егсе, travel, news, and marketing 


Fast Refresh 


Reliable live-editing experience for your Ul components 


export default function({ data )) { 
return <Layout> 


= Registry 


Fa st. Summary Recent Contributions </Layout> Flexible Data Fetching 
^ Received Today Total Received Connect your pages to any data source, headless CMS, or 
Receive guest 5720 56,860 Шейн kad ra dore нова. 
tributi 
contributions 5. 
Е o We've just transferred $722 to your bank 
Receive heartfelt contributions instantly and straight to your | ж Ме r b OX t efa С a Edge on Localhost 
bank. Guests can choose any amount of money to give, using all y y y [2 From caching to Serverless Functions, all our cloud 
major credit cards. It's simple, safe, and 100% secure Overview y primitives work perfectly on localhost 


Total Funded 
——————— 56,860 


Start receiving contributions 


Total Remersng 


— БН 2 Big and bold typography 


WORKS WITH 30+ JAMSTACK FRAMEWORKS 


ог ^vooononoeg 


< Thank Cyan Contribution: $250 


с 
Simple. 


на Preview 


= Enj Mena | 
Det dt betel od tea Accelerate with vour team 


A . 
запр Features v Pricing Integrations ~ Partners Customers Learn v 


Make more money 
with smarter 
marketing. 


Build your ecommerce brand—from customer acquisition to 


loyalty and retention with Drip. We give you the tools you need 


to build personal and profitable relationships with your 


customers at scale. 


Start driving sales with Drip today. 


Revenue Performance by Strategy 


Journey Health 


Oorders 


# SMS Form Submined 


# Send “Welcome code 


Talk to an expert Sign in 


Top Strategies 


1 order 2+ orders 


· | 
5 
pq —— 


Email Engagement Results 


We've helped ecommerce marketers generate 
over $1 billion in attributed revenue. 


$1,002,632,467 


Grow and improve 
your list. 


Attract more customers online with high 
converting forms and lead ads, and give them 
a warm welcome when they sign up for 

your list 


3x more sales with a welcome 
email vs untargeted 
promotional emails. 


Send emails 
with ease. 


Increase engagement with email marketing, 
optimize with A/B testing, and tailor your 
messaging with recommended 


audience segments 


8x higher revenue with targeted 
email sends. 


Turn shoppers 
into loyalists. 


Know who your best customers are and 
reward them. Use automations to nurture 
customers post purchase and make them 


оца! for life 


Repeat buyers drive 3x more 
revenue and are 9x more likely 
to convert again. 


Trusted by 27,000+ marketers worldwide 


CRAFT ::- 


Make more money from 
email marketing. 


Drip makes being data driven a no brainer. Revenue 
dashboards show you in-depth revenue and engagement 
stats for each email and automation strategy. Compare 
strategies to see what's driving your performance and 


where you can improve. 


те SPICE HOUSE 


POLARIS 


Read customer stories 


Revenue 


v 


lensabl 


ми 


we $626,163 


19 


€ $28,094 
© 16% Drip attributed А/ 


=> Irregular round design 
elements 


& Hand-drawn icons and 
patterns 


" m 


" m 


Headings using soft 
serif typefaces 


Illustrations in 
calming pastel colors 


4 Banking 


Investing Borrowing Planning ~ Expertise + 


LOG IN GET STARTED 


Finances, simplified. 


Unlike banks that let your cash sit idle in your accounts, we use 
technology to help you grow all your money effortlessly. 


GET STARTED 


М nerdwallet 
BEST ROBO-ADVISOR, 2019 «n 
BEST CASH MANAGEMENT, 2020 BEST R 


pedia 
BO-ADVISOR, 2020 


Upgrad 
«де ankil 


No account fees, 0.35% APY/And unlimited, free transfers. 


AY CASH 


Direct deposit and get paidAfp to two days early, send checks, 


pay bills, and get cash frof over 19,000 ATMs for free. 


GET STARTED 


LEARN MORE 


ATM withdr anal 


BUILD YOUR NET WORTH 


Invest your savings. 


ash can be a bad thing — earning 


Portfolio Allocation 


Holding long-term savings 


Target: 35% US Stocks 


cover our annual 0.25% ЗУ tee more than Зх over. 


Your Diversified Portfolio 


Ф US Stocks 35% $13,612 
€ Foreign Stocks 26% $1011 
€ Emerging Markets 17% $6,612 


Dividend Stocks ^ sam 


Municipal Bonds 1 65,445 


9 m 4 


SAVING MADE EASY 


Set your finances 


(==) Paycheck Optimize your money across spending, savings, 
and investments — effortlesslv. 


%% SECFI не Plan 


Make the most of 
your options] 


We are a team of equity experts 100% focused on 
helping startup employees understand, maximize and 
unlock the value of their stock options and shares. 


Analyze your equity 


UNDERSTAND 


What are my options 
worth and the cost to 
exercise? 


Tools such as a profit simulator 
and tax calculator show the 
value of your stock options and 


exercise cost. 


Calculate 


Pay for... 
your option 


Our financina s« 


needs. Wherever you are in your journey to wealtt 


ELS = AU 


are tailored to your spe 


Learn Invest 


MAXIMIZE 


Should 1 exercise now 
or later? How can | 
afford it? 


Non-recourse financing covers 
the cost of your exercise - with 
no need to pay it back until your 
company exits. 


See how finaggfig works 


4 Ргодгат Мападег 
Los Angeles, СА 


$ 450,000 


to exercise options and pay his taxes 


Sign in Sign up for free 


UNLOCK 


І own my shares - сап | 
get liquidity now 
without sell 


inancing helps you advance 
your shares for other financial 
priorities - with no need to sell 
on the secondary тап 


equest financing | 


What our clients 
ay about us 


The service that Secfi provides is invaluable to many 
í people in my situation. | had a great time working with 


=> Headings using soft serif 
typefaces 


& |lustrations in calming 
pastel colors 


serif typefaces 


< Illustrations 


=> Headings using soft 


% Mine Whatwedo Whoweare Forcompanies  Privacyinaction FAQ Blog 


Welcome to 


The Future of 
Data Ownership 


Discover where your personal dat manage your digital footprint. 
You decide where your data should o—fshouldn't be, and we'll make it happen. 


(intel на али Venture Evening Standard, AST(MPANY 


Empowering users 


Your sm 
data assistant 


With Mine, you can еп) 
safe and secure. 


the internet, feeling 


Draw the line between services you use 
& those you don't, which put you at risk. 


How it works 


e the sole 
owner of your data 


We discover the companies holding your data by analyzing your 
emails' subject lines. We don't read or collect the content of your 
emails. 


Mi Mino 
Discover your digital footprint 
We map all the companies you've сета Where's your data? 
interacted with through your email — Ф м.м 
~ 
| — 
arn 
Maik шр, тык ха 
2 = == 
= wu --- 
Where's your data? © Ө ES 
E 07 мешу Mace 
——— -- pi 3 aay 


SECTION 06 — 
COMPONENTS AND 
LAYOUT PATTERNS 


А 


JONAS.IO 


SCHMEDTMANN 


SECTION 


COMPONENTS AND LAYOUT 
PATTERNS 


LECTURE 


WEB DESIGN RULES #10 - PART 1: 
ELEMENTS AND COMPONENTS 


HTML CSS 


FROM ELEMENTS TO WEBPAGE 


PATTERNS 
Elements —J Components => Layouts — Webpage 


asour MINDJOURNAL stvitws 


With you every step of the way. 


With you every step of the way. 


Based on scientifically proven research, our 


guided exercises and signature Check-in tool will cc 
LEARN MORE 


help you build a journaling habit you'll actually 


stick with. 


The ultimate tool to help you feel more, do 
more and be того. Your journey starts here. 


LEARN MORE 


El 

ІН With you every step of the way. 
2 

E 

m 


LEARN MORE 


More than just a notebook. 


Designed and built for you. 


Trusted by thousands о! guys just like you, the 


Designed and built for you 


62 MORE 


No matter what you're looking to achieve in life, 
the Journal will help you get there. 


410%-сиамама з GUIDED STAGES OF LONA TUBE саскан 
көсөм HULE DICO NA о: 


В 27 


СОТТО FORREGIMNERS E 


РАТТЕВМ5 


@ Use common elements and components to convey your website's information 


& Combine components into layouts using common layout patterns 


@ Assemble different layout areas into a complete, final page 


Q ROM 


Text 
Buttons 


Images 


Input elements 


Tags 


This lecture 


о 0 4090 о юг 


Breadcrumbs 

Pagination 

Alert and status bars 
Statistics 

Gallery 

Feature box 

Preview and profile cards 
Accordion 

Tabs 


10. 
11. 
12. 
16 
14. 
IS: 
16. 
|А 
18. 


Carousel 1. Navigation 

Customer testimonials 2. Hero section 
Customer logos 3. Footer 

Featured-in logos 4. Call-to-action section 
Steps 9. Feature row 

Forms 

Tables 


Modal windows 


Row of boxes or cards 
Grid of boxes or cards 
Z-pattern 

F-Pattern 
Single-column 
Sidebar 


Multi-column/magazine 


1. 
2. 
3. 
4. 
3 
6. 
7 
Ө. 


Asymmetry/Experimental 


A ELEMENTS 


Job Description Rewriter 
Rewrite your job description with our free Al-powered tool! К ibery adapts and 5 ГОУУ5 
Paste іп a short job description and we'll generate a longer variant to help you get your with your comp any. 


creative juices flowing. If you don't like the output, hit Generate again to get a different idea! 
Experiment, take notes, and have fun! 


A work management platform that replaces many tools inside your 
company and embraces changes. 


Shorten development, deployment, and migration Everyone on the same 
cycles page. For real. 


Prevent rollbacks and service disruptions by identifying weak points in your system before Sanity is the first content platform to empower teams of 


launch. all sizes with real-time collaboration, advanced version 
control and more. 


Most Popular Tour We offer the perfect variety of experiences to satisfy 


anyone's desire for adventure. Whether you want to relax 
Categories in the unparalleled beauty of Iceland's nature or take a 
more challenging adventure, we've got you covered. The 
possibilities are endless and the memories will last a 
lifetime. 


44444444 


A ELEMENTS 


TOOLS FOR MARKETING TEAMS 


Tools and insights to help you work 
smarter, together 


Marketing consultants and freelancers use Trendmo to free up time, demonstrate impact, 


and tie their efforts to real business results. 


TRANSFORM YOUR ECOMMERCE BRAND 


72 hour product photography 


Launch with one click, 


or use our SDK. 


Voiceflow's one click publishing or SDK enables customization 


for any workflow. 


GET A QUOTE 


Get started with 
Cover today. 


After getting a quote, you'll have instant access to ап 
insurance expert for advice. Reach out to them by text 
message at any time. 


How we do It 


Data backed, scientific proof of 
food claims 


Food In-Depth has developed comprehensive and rigorous testing 
solutions that are fast, affordable and consumer usable. 


EARN MORE ON YOUR PAYCHECK. 


GET PAID UP 
TO TWO 


DAYS 
EARLIER. 


Why should you wait to get paid? 

Set up direct deposit with the Cash Account and get your paycheck 
up to two days early. The earlier you get your paycheck, the more 
time you have to earn interest. 


Build. 


Have a unique work process? 


Create 
a custom app 
іп minutes. 


Fibery provides freedom for curious lego-lovers. 


A ELEMENTS 


ADD ТО САВТ > 
Get a Free consultation > 


FLOORPLANS 


Add to Chrome 


@ DOWNLOAD APP 


Learn More 


| SHOPMATTRESSES > 1VI TRY NOW FOR $3.50 


, E 
MEE ш. 
E z ---- = = 2 


Try for Free See pricing 
Start Free Trial Talk to us 


VIEW PRODUCT DETAILS 


Ship here 


Edit Delete 


Move to favorites Remove 


Go to file У Code ~ 


ОЗ IMAGES A ELEMENTS 


New year, New possibilities 


Invest in Yourself 
With a Wildist 


Photography Workshop : 


Model X 


Order Online for Touchless Delivery 


2:00 pm 
3:00 pm 


4:00 pm 


Home 


Brooklyn v 


c 


Checked in 


$342,483.94 


я. 
u 


See all 


9:30 AM - 10:30 AM 


Bayview Meeting Room 
Meeting to discuss recent project... 


NINA SHARP 
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Next available See all 


т», 


5 


— A" ЖЕ | 
Italy Japan California Frances 


A ELEMENTS 


Deliver to 
ДА. Udemy Categories Q Search for anything 


Your work email Learn more 


dy О, Search for Ul designs... Screens Inbox flows 27 User flows 


С) Search or jump to... 


DELIVER EVERY 


30 DAYS ^ 


15 DAYS 
CASE QUANTITY - 1 $ Venue 
45 DAYS : 50 + Active Members 


60 DAYS 


Due to the pandemic, our delivery times may be longer than 
usual. 


О5 TAGS A ELEMENTS 


© Attach Stack at setState Calls іп DEV Mode Component: Core Utilities “Туре: Enhancement | 


#7387 opened on Jul 31, 2016 by sebmarkbage 


АЦ documents in 
© IE 11 and Edge no longer prompt to remember password on controlled form Component: DOM О 8 e с oftw а Ге 


#7328 opened on Jul 21, 2016 by IPadier 


© Optimizing Compiler: Compiling to Internals “Component: Optimizing Compiler Generate all necessary documents for Business, HR, 
#7324 opened on Jul 21, 2016 by sebmarkbage Finance, Medicine, IT, Legal, Education — using one 


cloud based software. 


Business Plan Business Model Canvas Lean Canvas 


About | | 
Discovery deliverables SWOT Analysis Meeting Notes 
A declarative, efficient, and flexible Prototypes Time & Cost Estimation 
JavaScript library for building user | 
. Product Requirements Document 
interfaces. 


Architecture documentation Roadmap Medical Certificate 


С? reactjs.org Prescription 


Timeline 


react javascript library ui 
2+ weeks 


frontend declarative 


Calm Landing page 


1 year, 12 months ago 


Source 


Awards Footer Hero header Ratings Testimonials 


01 BREADCRUMBS Б COMPONENTS 


Help Center > Integrations > CMS Integrations 
Development > Web Development > JavaScrip 


The Complete JavaScript Course 2021: From 


а WordPress 

Campaign Builder Zero to Expert! 

pili " The modern JavaScript course for everyone! Master JavaScript with projects, 
challenges and theory. Many courses in one! 

Integrations v 


4.7 ЖЖЖЖ% (99,122 ratings) 417,204 students 


meta Using Sleeknote with ya 


@ Last updated 1/2021 Ө English & English, French [Auto], 5 more 


Account and Payment Wo rd [2 ress 
FAQs > 


CMS Integrations 


PandaDoc Why Рапаарос? y Solutions v Pricing Resources ~ | Integrations Login Start free 14-day trial 


Search for items, brands and inspiration 


USOS 


i i i i i 
Newin Topman Clothing Shoes Accessories Trending now Activewear Face + Body Brands 


Concord School District of New 
Hampshire 


Home > Men > AToZOfBrands > The North Face 


В COMPONENTS 


< Previous 1 2 " 19 20 21 23 Next > 


В COMPONENTS 


> #1 Product of the day on Product Hunt > 


С! үсіе Pricing Login Get started 


@ Favorited! Add to list 


The modern community psc 


Your GitHub account has been connected, and you're all set! Welcome 


platform for creators to CSS for JavaScript Developers. 


BUY 3 OF ANY TREATS 8 SAVE $5 | DISCOUNT IN CART 


юрю (© а Т р © NEW Free Next Day Product Pick-Up 


SAMPLES TRIAL ABOUT HELP ACCOUNT 
Fe BIS 


Check out our feature on the news 


Meet Open Design - the first gateway to programmatically read design files. 


б avocode Product т Solutions + Learn т Blog Download Pricing 


КА 


Linear Release 2020.12 + Series А 


Save time 


» 
_ M ча 


04 STATISTICS 


Join the 
party. 


GREENPEACE 


PORCELANOSA 


10 years 


emails every day expertise 


100 million 


AMNESTY 


175,000 $О INTERNATIONAL 


users in 160 countries to get started 


5% 


10,000,000+ 


Annualized savings identified for our customers. 


12 minutes 


Avg. time to roll out program. 


$100,000+ 


Avg. savings per company. 


1.5% 5.4 days/mo 


Cashback on everything. Time savings for finance teams. 


4,000+ hrs 1,500+ 5 min 


Time spent perfecting our Edge cases Initial set-up time 
algorithms obliterated (seriously) 


We brought engineers, accountants, and the Big Four Every edge case you can think of - time zone, currency. The work on your end takes 5 minutes for us to get 


together for perfection locations - taken care of you a trial report 


U.S. Benefits 


Zero 


Timesheets or expense reports 


People here are trusted to get their 
work done and spend money 
responsibly. 


70 6.8B 


CITIES REQUESTS PER WEEK 


20 


Days of PTO 


We want you to use all of them. We 
are also closed for one week during 
the holidays. 


401 


Nonelective 3% match 


We contribute to every person's 
retirement account regardless of their 
own contribution. 


9PB 


DATA SERVED 


100* 


Health, dental, vision coverage 


We pay your entire monthly premium 
and cover 70% for spouses, partners, 
and dependents. 


18 


Weeks paid parental leave 
Primary caregivers get 18 paid weeks 
and secondary caregivers get 6 paid 
weeks. We are flexible if you need 


more time. 


99.99% 


GUARANTEED UPTIME 


Interviews in past year 
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Join millions getting more mindful 
with Headspace 


70M Downloads 


Across all platforms 


4.9 Stars 611.9K Ratings 


Average rating On iOS and Google Play 


A FEW DATA POINTS 


45hrs 


Sourcing time saved per hire 


80% 


Candidate response rate 


Faster docs. Faster deals. 


Are you still manually building out sales documents, bogged down by 
inefficient processes and delays? PandaDoc helps you get documents out 
the door fast to keep deals moving. Notifications, on-the-fly editing, and 

eSignatures allow you to maintain momentum that closes deals fast. 


65% 


decrease in document creation time 


30% 2x 


decrease in time-to-close closed deals per month 


О5 GALLERY 


We built Circle for 
creators like you 


Communities are the shelf life of independent online 
creators. They build connections among members, 
enable profound experiences, and empower vocal 

advocates. 


But after speaking to hundreds of creators, we 
observed them struggle with co-opted products, 
stitch together subpar solutions, and wrestle with 

discussion boards that went stale. 


So, we built Circle: a community platform that 
integrates with your creator stack and transforms 
your passive audience into passionate superfans for 
life. 


Start your community today 
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05 GALLERY 


Three Acres 


Restaurant 


DISCOVER MORE 


06 FEATURE BOX 


Scope of work 


Monthly Coffee 
Subscriptions 


Our monthly coffee subscription is 
guaranteed to keep you feeling energized 
every day of the year. 


Subscriptions 


Generate recurring revenue and build customer loyalty 
by selling subscriptions to your products on a weekly 
or monthly basis. 


ADDED SUGAR 


Added sugar consumption has been 
linked to cognitive decline, cellular 
aging, weight gain, and inflammation. 


Consult 


Schedule a consultation 


Chat with one of our executive 


financial design consultants to 


see how our services can fulfill 


your project needs. 


Оп average we spend almost 12 hours 
a week going through our email 
inboxes! 


— 


7 


Lightning fast delivery 


Try our 2-day service and get your shirts 
by February 12 


$33M 


Trackable revenue generated 
across our portfolio 
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Quiet your mind and 
calm the storm. 


INSIGHTS 
Log in once, see everything 


See social media, paid ads, Google Analytics, 
Shopify, and email marketing together. Drive 
results with clear, actionable insights across 


platforms. 


Learn more > 


COMPONENTS 


My Invited Visitors КЕСТЕНІ 
N 
Эу Membership communities Ж а 
L——4À E We're Hiring for a 
Circle offers the flexibility to create a DJ кыш Eon 
y = | Close to the metal - 
membership experience that's truly E , | 
а From direct integrations with e Responsibilities 
ours. 
y — card networks and banks to 
= checkout flows in the browser, у + 
Memberstack and Memberspace, Visitor Management every level of the financial stack. 
Circle can fit seamlessly into the rest Keep your office safe and secure. Allow visitors to check in, indeed 
я sign NDAs, and print badges on entry. Our software also 
of your membership stack. helps you save time by allowing your employees to pre- 
register their guests. FIND 
Examples include... Е 
КҮТЕ Find and attract 
пи candidates 


Exclusive memberships 
Fill your pipeline quickly with one-click job 


Communities for courses posting to 200+ sites, Al-powered sourcing, 


Premium masterminds employee referrals and more. 


LEARN MORE > 


Paid newsletters 


Conference communities = 
= (5 C = 
со 
Gets feedback from 
O == “ж 
ВО = 50 © stakeholders. 
With Greenlight you can easily collate > 3 Design consultants 
8 different data visualizations feedback from those who matter on Our team can help you create your 
. . А я h | h при | А А А 
O Secure including Kanban, calendar, timeline, ee ae s ai FF&E specification, keeping it on time 


Safeguard your agreements Gantt, map, form, and workload and in budget. 
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| | I Piet м е 
© вю Preview this course 
Magnesium €12.99 «999 90% off = 
bs I Tome à = : wer m Е Eco-Friendly Hemp Pet Collar | Dog Col... 
| ~ | e From Irish seawater EUR 25.00 FREE shipping 


e Includes 72 trace minerals 
e High solubility 


FROM MYRDALSJOKULL | | 
e Essential mineral for over 300 


АТУ Black Beach Safari и Te 30-Day Money-Back Guarantee “е” = ) 
and (һе Plane Wreck This course includes: Mo 4 ap 
All-year 2 hrs 131 $6 [>] 68 hours on-demand video 
D 20articles 
07 18 downloadable resources PIADINA WITH 
со Би lifetime access BREADED CHICKEN, 
[] Access on mobile and TV TZATZIKI SAUCE AND 
Я Certificate of completion SPINACH 
Daily Digest Apply Coupon 
Ж (+)25' € 74 Y Media 
React Native for шо 
Designers Part 2 EAS 


12 videos - 3 hours 


de 
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MN Alex Strohl 


ClearvPN 
Simple fitness THESEA Multiplatform VPN Adventure Photography 
experience for 
B — EXPLORER “ee ле 
€78.95 
ше — ]-Year Subscription Made For 
а EUN Rising Photographers, Aspiring 
Exploring the jaw-dropping US east coast by foot Professionals 
and by boat 
View More Options Experience 
Q UI8 % 401 O 36.5k (9) Miami, USA E June 2021 45 episodes in the studio and from 
the field 
FJ 4 stops а 15 people 
Get 
A new perspective on your career 
$497 per person 
DETAILS 
91 1 4.8 rating (6) 


Explore Workshop — 
From $ 99,200* 


Read more 


а D "Development is open to everyone." 


[2 Build Your Porsche › All Models un Claudio, Senior Developer born in “79, talks about 


the importance of experience in software d... 
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7 N 4 ғ” 
: e | Followin 
5 André Jonas ~ \ - 
| w 
Hi YY I'm André, a seasoned software 


engineer and former teacher working Dan Abramov 
remotely from Portugal. | am a geek, a 
problem solver, a communicator and 


| didn't make - Please ask 
forever a student. https://andrejonas.com/ 


technical questions on GitHub issues 


? ‚ he/him 


don 288.2K 


Senior Software Engineer 


Jonas Schmedtmann we а 
jonasschmedtmann Silves, Portugal Founder 
Designer. Developer. Online teacher. JOINED © @shpigford 
8/01/2021 
Edit profile 
21 6.7k followers - O following - 1x 38 
o 
©) Faro, Portugal fursty © 
ЕЛ hello@jonas.io 623 | | E 
2 jonas.io © https://bitski.com/drop006 u 


|| || \ 
Y @jonasschmedtman 


1,544 1.1m 611 


Highlights 


Ж Arctic Code Vault Contributor 


Sandeep Acharya 


Timbuktu 


© timbuktutravel.com - @TimbuktuTravel - Timbuktu empowers curious travellers to 
explore far-flung corners of Africa. Design your own safari, we'll make it happen! 


3.5k followers - 1.5k following 


1m monthly views 
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FAQ Current Job Openings 8 All Departments ” WHAT WE DO (SO YOU DON'T HAVE TO) 
We know that you have a lot of questions, i i ~ 
we've tried to list the most important ones Y Customer Success | 7 Project net worth а ums 
Engineering | ” 
е Do need to pay only once to де Popkit for life? v 02 Incorporate the essential data ^ 
Finance | y 


Absolutely! We offer only one price: 79$ for a lifetime unlimited access (unlimited websites, unlimited domains, By using relevant third-party data, Path more accurately calculates the 


unlimited page views, unlimited widgets...) ‘ . + 
dix x cost of each scenario you explore and its impact on your overall 


Legal a 


finances. 
© Do ineed how to code? > Head of Legal Dep. Corporate / MEA d • US Census earnings growth data 
Legal Counsel - Commercial А • Bureau of Labor Statistics retirement spending data 
е Real-time property prices from Redfin 
Q Does Popkit will work with my website? > Senior Legal Counsel - Commercial > e Freddie Mac mortgage data 
е Department of Education’s projected college costs 
Marketing y 
o Does Popkit affect Website Performance? > 
Sales Americas | M 
-i v 
о Do you һауе plans for larger needs? > Reflect your all ІП costs 
Sales APAC | 7 
© Can | use the Popkit widgets adapted to my language? > 
Sales EMEA | M 
Security & IT ~ 


WHAT'S COVERED? 


O) Your personal belongings in your home v 
When they are damaged, destroyed or stolen 


O Your liability to other people У 


Occupier's and personal liability 


Visitors’ possessions 


Y) Damage occurring at your home, provided they are not insured ~ 
elsewhere 
Money cover 

© Covers against loss or damage occurring at any location within the у 


United Kingdom 
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FAQs ©) Multi-brand specialists Frequently Asked Questions 


О Industry-leading repair-rate 


How can | get started? How much does Yotpo cost? 
Getting started is easy! Request a demo to hear.. Our pricing plans are based on your business needs, Last year Greenbridge Technology repaired 86% of devices Is my data really secure? 
taking into account your monthly order volume, 


sent to us by our customers. Our primary objective is to get 


traffic, products, and domains. Our plans are built to 


Which platforms does Yotpo езин, js 2. value по customers’ devices fixed and returned to them as quickly as is 

support? : possible. This industry-leading repair rate is the central pillar of How do you backup my data? > 

Yotpo integrates with world-leading eCommerce... Greenbridge's commitment to deliver large cost-savings to Craft has a data recovery plan. Our databases are always replicated synchronously, so a quick 
Does Yotpo support businesses our Clients, and to minimise the amount of electrical waste recovery can be executed at any time. As an extra precaution, a snapshot of the databases is 


with high order volumes? taken daily, to allow recovery in extreme conditions. 


being generated from our claim flows. Greenbridge 
Is my data secured? Who owns the 99 9 
Yes, we have a solution for any order volume. Over.. 


content? Technology delivers low average costs per claim for our 


Protecting our customers' information and data is... Clients as well as a great environmental outcomes. 


: Can | cancel my account at any time? 
Does Yotpo work with Google, 
Facebook & Instagram? 
Yotpo is an official marketing partner of Facebook,... O Best-in-class SLAs 


Can I connect Yotpo to my other 


marketing tools? Can І change plans after | signed ир? 


Absolutely! You can integrate with the marketing... 


Modern customer experience 
What kind of plans do you offer for O Р 


small brands? What plan do | get with the free trial? 


O API and Integration Solutions 


Our Growth plan, starting at $19, is perfect for sma... 


What happens after my trial is over? 
What are Contributors? 


What is a Product Admin? 


Rated 5.0 on Clutch + 9000+ stars on GitHub + 

94% employee retention — 1.5 years of cooperation + What is a Product Editor? 

rate on average 

Happy employees build 

happy software. Hire a team 100% office-based team + What is a Feedback Manager? 


that cares about giving you 


stellar results. 


50+ successful projects + 


Kindle O2: Paperback Other Sellers 


$37.09 $22.76 - $45.49 See all 2 versions 

Buy $37.09 
" includes VAT 

eBook features: | Digital List Price: $59.99 

* Highlight, take notes, and search in the book Print List Price: $69-99- Save $32.90 (47%) 


• In this edition, page numbers are just like the physical edition 


е Enhanced Typesetting: Enabled > 


* Page Flip: Enabled v Send a free sample 

Read with the free Kindle apps (available on iOS, Android, PC & Mac), Kindle E-readers and on Fire 

Tablet devices. See all supported devices “ Deliver to: 

Sold by: Amazon.com Services LLC Your Kindle Library v 
Give as a Gift 


Enter a promotion code or Gift Card 


Quality assurance Onboarding Coaching and 1-1s Analytics & КРІ5 Browser Extension 


Get your customer support | | = : 
герз ир То зреед —— и ae TA 


View real-time KPIs by agent to ensure consistent 
performance amongst agents and identify top 
and low-performers. Deliver transparent and 
actionable feedback. With ongoing visibility into 
their performance, there are no surprises. 


9o.>> 


Sales Marketing RevOps Customer Success 


Breakdown organizational silos 
with a seamless workflow to 
produce faster sales cycles. 


Learn more 


Free Tools Marketing CRM & Sales 


C Marketing Hub™ 


Customer Service CMS 


Everything you need to capture leads and turn them into customers. Calculate your price J, 


NEW: Only pay for marketing contacts. 


X 
Enjoy transparent pricing by choosing the contacts you pay to market to (and store your non-marketing contacts for free, up to a limit of 15 million overall contacts). 
Learn more [7 
Starts at €46 Starts at €823 Starts at 
7 ж ж 
€41/mo | €740/mo | €2,944/mo 
Starter billed at €552 €497/yr Professional billed at €9-879 €8,880/yr Ente rprise billed at €35,328/yr 
Starts at 1,000 marketing contacts (Z Starts at 2,000 marketing contacts [7 Starts at 10,000 marketing contacts (7 
Pay Monthly Pay Upfront SAVE 10% Pay Monthly Pay Upfront SAVE 10% 
Commit monthly Commit annually Commit annually Commit annually 


Description Care Instructions Ingredients/ Materials 


Talk to Sales 


End of Life 


This toothbrush is the perfect replacement for plastic toothbrushes. Our plant-based 


bamboo toothbrush is made completely from plants: soft bristles, smooth handle, 


wrapper and box. 


Fully compostable packaging. USDA Certified Biobased. Dimensions: Length is 7", Width 


is 4" and the Height 1". Product of USA and China. 
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Plant-Based Protein 


cm, Laser Beam Dedicated Team Applications for iOS and Android OS 
° Custom Uls with complex animations and 
=| Worthwhile Mobile 4 
| = transitions. Vitamins & Minerals Plant- Based Protein 
| e Augmented reality apps with ARKit and ARCore. 
40) Humane Blockchain Soy protein isolate is the only high quality plant-based protein that contains all 
e Applications for infographics and data 9 essential amino acids. These are the amino acids our bodies cannot produce 
visualization. and need to be consumed in the diet. In addition, it provides a smooth 
Же) Superstar АК Healthy Fats texture, optimal flavor profile and added health benefits. Learn more. 
Learn more 
Е) Tsar VR 
Slower Digesting 
| | | Carbs 
áp Daring Machine Learning 
: п Inspiring stories and mini-meditations delivered 
Deploy () daily to help you start your morning right. 
i 
Scale Resize 
Quickly scale up, scale down, or migrate to different 
Store Droplet types to meet the demands of your 
customers. 
Secure 
Monitor a 
Ó 
Floating IPs 


Redirect network traffic between your Droplets using 
a Floating IP. 


“The amount of time I've been able to 
save with Airtable has been 
immeasurable, and the more we've 
worked with it, the more applications 
we ve found. Now the first question | 
ask is: How do we Airtable this?” 


Rahul Kothari 
Senior Product Marketing Manager 


Ji- Frame.io 


AMERICAN BREAD 


ммм м ~ SNS ү ЧУ ч ч ч ч ч ү с ч ч ү ч 


For those who love the taste of an “on the road” 

snack, here is a range of “Stars and Stripes” 

products, inspired by the American tradition: 

from the hamburger, to the hot dog and the © 
soft bread sandwich, the American range 

combines the flavour of the classic forms of USA 

bread, quick and easy to prepare with extreme 

ease of use. 


FIND OUT MORE > 


eu а AA t ~~~ Уы, 
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arockerbox 


We have been able to make scaling the technical infrastructure of our 
business cost effective and efficient. 
Read story 


Rick O’Toole 


Co-founder and CTO 
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CoilBlogs 


66 99designs 15 a platform 
with a good name and a Access a | | 


very good service... o == 
exclusive E 
content on тч 
book. Therefore, we entrusted this to experts ө PA AA 
and ended up being very happy with the result.” Col | В | 09 6 Ж Жм 9 Next Level Seoret Rooftop Garden Restaurants 


Val R } ist Top Picks from js13k 2019 
ы 
| | i Enjoy an ad-free 


features, and sup 


E CSS-Tricks 


d а 
WAN || 


6-1 


IFEMALEA 
FOUNDERS 


How to not suck at design, a guide for the non-designer. 


where entrepreneurs can easily find the right 
design for their company. The book cover for us Introducing им masia ааа 
was а very important part of the success of the | 


PASIVA а а == 


= 


Discover 


What members are saying 


Explore thousands of US and UK stocks 
and exchange-traded funds. 


17:32 «те 
© @ Discover 


Recently viewed 


І came to learn that the < » 
storyline in my head ... was zoom QO ~ 
holding me back. 


$107.47 M £3.62 
26.85% ($24 pem 


Newly added 


: Popular ETFs 
Peter, Belgium 


on what he learned when sitting with himself 
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" hey.com is the most exciting app I've used in years. A complete rethinking of email, full 
of bold, brilliant ideas. Highly recommended. Not only for the product itself, but because 
its boldness will inspire you to question your assumptions and think differently.” 


тұ Adrian Holovaty 


“| just got an early demo of Hey from @jasonfried. | can confirm this will be my new 
default email over Gmail... it's a beautiful rethinking of everything wrong with email . | 
can't wait for you all to play with it soon.” 


“5 Kevin Rose 


“Let me tell ya'll something: Hey is going to change the way we use email . Bye-bye 
Gmail. Helllooooo Hey.” 


O: 


Don't just take our word for it 


See what some of our 10,000+ users across the globe have to say 


/ 


\ 


a4 


G жжжжж G 2222 С 222441 


“We are using Reply.io for our outbound “Reply has allowed me to quickly set up “Reply.io will take care of the weightlifting 


sales campaigns and for this the solution cold outreach campaigns while running while you can focus on closing deals with 


is pretty great.“ fast and easy tests on messaging.“ your engaged prospects." 


Hannu Stewart Brittney Barrett Alessandro Rinaldi 


Head of Sales at Drawboard Co-founder at Kinside Head of Business Development at Labiotech 


11 


| сап do everything on my own 


schedule. From picking out interview 


time slots to selecting only the 


companies | want to interview with, 


this is what recruiting should look like. 


Joseph С. 


11 


Finding a new job 15 tedious 
and stressful. Working with 
Hired meant multiple 
companies that were a good 
fit were looking to hire me. 


Dipika M. 


11 


I've never felt so taken care of by а 
recruiter in my life. Saying my Talent 
Advocate goes above and beyond is 
an understatement. She clearly loves 
what she does, and that devotion is 


absolutely contagious. 


Jorge S. 


kk ho 


Long time user - back again! 


Infusionsoft / Keap is the most 
intuitive and customizable 
solution for my... 


Michael Ferris 


Feb 18, 2021 


Leo is much more sophisticated than a 
simple news filtering tool. It's a true Al that 
uses machine learning and NLP to filter 
out the noise. 


Braintree 


A PayPal Service 


kk kk ok 


If you are committed to your 
business Keap іс the support 
system for you. 


The system is only limited by 
your commitment. The team and 
resources are there to create 
the... 


David Radke 


Feb 18, 2021 


єє 


We call it our cheat code. To find 
qualified talent that's looking ... 
half the battle is already won. 


Kyle Barbato 


Sr. Manager, Talent Acquisition, Braintree 


kk Ak d! 


Keeping on task with Keap 


| like the fact that Keap is 
available on all of my devices and 
| can very quickly access my... 


Emily Rogers 


Feb 03, 2021 


kk Ak ho 


| love Infusionsoft! 


What | like best is how easy it is 
use to use and how it integrates 
with other... 


User in Marketing and 
Advertising 


Jan 28, 2021 
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John Crain эў 


@gnarzly 


Have been trying out @Tandem_HQ 
for video and screen share. Love not 
having to keep track of zoom links :D 


| Avery Carter Q 


Our team has been using it for about 
2 months or so, and it has been a 
really nice way to start 
conversations. 


Working remote, you find that there 
is this weird social awkwardness 
over starting calls or wanting a super 
quick call with another teammate. 
Tandem has the best solution for 
that problem from what l've seen 
thus far. 


The team works hard and cares a lot 


about customer feedback which is 
awesome. Keep it up! 


kk d dí 


65 javascript joe Q 


Huge fan of Tandem so far! | think 
this is going to take distributed teams 
to the next level. 


What | love about it: 

- intuitive + beautifully designed Ul 

- simple + easy to use 

- instantly connect to team members 
via video or audio chat 

- instantly share your screen 


| honestly feel like this is going to be 
a game-changer for working 
remotely. Excited to see the future of 
Tandem! 


Nikema Prophet ж) 


@dev_nikema 


Tried out @Tandem_HQ today with 
@enigmaticsoulrg and loved it. Much 
better than a running zoom call for 
virtual coworking. 


“It’s true, the original Casper is a great 
value for the price. The cooling 
technology keeps me comfortable all 


night.” 


Nicole 
es 
4 Brooklyn, New York 


[> JASON y 


@jscottpearson 


Excited for the @Tandem_HQ crew! 
They came by @figmadesign a while 
back to show us what they were 
cooking up. Rad that it was inspired 
by, and designed using, Figma. As 
the manager of a semi-remote team, 
anything to make remote work more 
enjoyable and productive is 9% 9! 


‚ Kevin Hale © Y 


Oilikevests 


Just tried Tandem and it's probably 
one of the best video/screenshare 
collaboration apps for remote teams 
I've seen since Screenhero. So many 
beautiful little details. tandem.chat 


Original Mattress 


From $595 


Erom our clients 


A Davide Dattoli 
ЧУ” Co-founder & CEO, Talent Garden 


s Krister Bagnkop 
w Mobility Platforms Product Owner, 
горса novation Lab 


гор \ 


% Vittorio Banfi 


Tidio has been a huge success on our guitar lesson website 
because it allows students to ask questions in real-time as they 
stream our guitar lesson videos. The Tidio app was easy to 
install and it is by far the most modem chat application for 


websites. 


kKkekkk 


countryguitaronline.com 


«Pros with fresh ideas. This studio is able to make digital products 
around people needs.» 


«What makes this team great is how they're helping us in decision- 
making. We stopped talking about things over and over and just 
focused on building the right product.» 


«Moze is a world-class team working at the intersection of 
technology, design and business. If you are expert in those areas, and 
obsessed with design, you can create beautiful things that just work. 
That's what they do.» 


Devin Shawn 


thoughts and questions without 
delay or wait time! No second- 
guessing—just asked and 
answered quickly in order to make 


their purchasing decisions easier! 


Andrew Walker 


erystalkayak.cor 


l installed Fathom on my personal website 
yesterday, and wow, what a breath of fresh air. 
| love how simple it is, and for something like a 
blog it really gives you all the traffic metrics 
you could need. 


Joel Gascoigne, CEO of Buffer 


Fathom is the perfect privacy-based Analytics 
solution for us. We can provide the metrics 
that our clients need and reassure them that 
their customers' data isn't being shared with 
faceless companies. 


Darren Pinder, owner of Vatu 


єє 


HIGH 


| switched to Fathom because it's an ethical 
analytics tool that | can trust with my data. 
The interface is beautifully simple to use: it 


shows me everything | want to know about my 
site's performance, and nothing | don't! 


Charli Marie, creative director of ConvertKit 


Developers are pretty tech-savvy people, and 
these days very privacy-cautious-they 
understand how scripts follow you across the 
internet, that's why we choose Fathom, 
because they don't do that. 


Oskar Krawczyk, cofounder of JSFiddle 


Thanks to Upflow, we are able to gain real-time 


FLYERS visiblity into our customer debt and follow up 


on unpaid invoices if necessary. 


Eugénie Chaltiel, CEO @ High Flyers Agency 


"Polly makes it easier for 


employees to share their voice.” 


Laura Zhang 


Senior Analytics Manager, People 


Our members аге so impressed. It's intuitive. 


It's clean. It's distraction free. l'm so glad we 
made this decision. 


Pat Flynn 
Founder @ Smart Passive Income 


Circle is going to fill the GIANT hole in 
between FB groups and Slack for virtually 
every kind of online community. 


Ankur Nagpal 
Founder @ Teachable 


If you already have an audience, use a 
platform like Circle. 


| David Spinks 
Founder @ CMX 


While Lessonly's software 
i tional 
have taken this from a 

| business exchange to a 
partnership. 


Marge from Dia & Co. 


their people 


Circle came at an absolutely crucial time for 
the Makerpad community and has been 
essential in allowing us to grow. The team are 
so responsive and the way they build is so 
intuitive that the platform gets better every 
week. | recommend Circle to everyone 
looking at building a community. 


Ben Tossell 
Founder @ Makerpad 


After playing with Circle for an afternoon | am 
seriously impressed. This is the app 
communities have been waiting for. Coming 
to every podcast and channel creator in 3 2 
1... 


Tyler Lastovich 
Creative + technical strategist 


We've built three communities serving more 
than 1,500 students using the new Circle. 


е Zoom hosts live calls 

e Teachable delivers curriculum 

e Circle combines ephemeral chat with 
permanent discussions 


These three ingredients + engaged instructor 
+ vibrant community = transformative 
learning experience. 


"Fm Will Mannon 
ue Course Manager @ Forte Labs 


Entire community + forums load via pop-up 
on foundersummit.co - so fancy, nice work 
Circle! 


Tyler Tringas 
Earnest Capital 
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Shereen 
kk kk k 


"Lugg is THE best! Solomon and Yuri were great! For my most recent purchase | coordinated a 
pickup elsewhere and drop off at my place. They were fast, efficient, friendly, and extremely 
helpful (I needed to move a piece of furniture to make some room for the item they picked up). 
They were in and out in 10 minutes! Thanks a ton!" 


Read more customer reviews —> 


Overall, Statamic feels like a CMS of the future, whereas 
WordPress feels like a CMS of 10 years ago. I’m sold & 
can’t wait to use it for my other sites. 


Paul Jarvis 
Founder, Fathom Analytics 


Figma < > 


“Because communication is centralized, it 
saves us a ton of overhead.” 


— Badrul Farooqi // Product Manager 


© Meet our customers > 
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Coworking brands love Optix See why over 100,000 teams choose monday.com 


Discover why leading brands call Optix the best 


coworking management software. ана f» " 
о hulu STUDIOS UNIVERSAL A Adobe (баса, 
ШІ | зтлпомф | КОШМОНК С: 
шеші LOREAL th Discovery е -здеегег 
Trusted by over 26,000 forward-thinking companies 
DocuSign Uber (© Rakuten Viber м Фотев  |НШоп 505 v TATA STEEL (®Bonusly  romrom ұз 


KONICA MINOLTA 


2 Skyscanner Lemonade © Expedia 4 ZipRecruiter 


Meet Our Customers > 


Join 8000+ professionals and brands already using VisualEyes 


Trusted b TERES 
rusted by (0, airbnb MailChimp Ө Spotify PRR: -- Microsoft 


E] meon va. АММА 
AFFIVAL 


BECOME A MEMBER МОМ > 
SCENTBIRD == бодоо © grain miro ч 


resume.io 
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Thousands of teams already add more focus to their work with Slite. 


You're in good company 


А : y А 
Trusted by leaders at some of the world's most inspired organizations VANMOOF (у airbnb WeTransfer Ө spotify Y 725197 == meero 


в E мх @ = 


amazon =  роовразн — ABInBev E Вгех © gojek allbinds (6) Pinterest 
PROGRESSIVE PHILIPS $ PLAID Qappi PELOTON FOX Mercedes-Benz 
The best creators trust Frame.io (@ ІШ PCarrie Se —— Rakuten ©) FIREEYE 
BuzzFeep HBO From startups to Fortune 500s, the world's best teams use Retool to power their internal apps. Our customers > 


ACTIVISION Цпкеа in CONDÉ NAST 63 Lightricks 


~ 
' accenture c 
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X xc XXe * 


5 Stars 


Thumbtack 


BUSINESS 
INSIDER 


TE TechCrunch 


“Sit back while neglected 
bathrooms are remade” 


“Not like your typical 
general contractor” 


startups СР pening 


KKK Kk 


4.8 Stars 


Google 


FORTUNE 


“Technology driven home- 


renovations” 


Featured in 


TE TechCrunch 


Your closest people deserve the best 


/ 


AS FEATURED ІМ 


Forbes CITY MATTERS 


WSJ Bloomberg Се New dork Times 


kk kk 
47 Stars Cocoon is a beautiful messaging app for sharing daily life with your 
М houzz closest groups. Private, permanent, and paid for by people instead 
of advertisers. 
crunchbase WSJ Р " P " " 
VA lex ~, Ye & ~, Q ~, 

“Handles the full remodel “A San Francisco based \7 Су М J \7 ы / 1 / 
from start to finish” home renovation startup” WP THE TODAY SHOW N 5 v APP OF THE DAY N y Ht1 APP OF THEDAY %2 


REUTERS NA 


Б COMPONENTS 


Any product, any website 


Right-click on any image on any website 
and click Save to project 


my 7 Our top picks from 


+ 


London Design Festive 


1. Pick a style 


Browse our style templates to find the best 
visual match for your product. You can even 


try a free sample photo if you're not sure. 


Save it to Clippings 


Add details and select your project. The 
product will be added to the board. 


East St. Hotel 


Bar 106 


| 


| 
= 


mb: 


Old Street office 


2. Pack your products 


Schedule a free next day product pick-up 
and leave the leg work to us. We'll text you 
once your photos are ready! 


We'll source it for you 


Request a quote on Clippings, and our 
team will source it for you.* 


и 


3. Download photos 


Resized for feed, story or billboard - Simply 
hit download and share instantly on your e- 


commerce store or social media. 


Fill out a form and tell us 
what you're looking for: 


5 minutes 


Solve a programming quiz 
(~15 тіп) 


Take a role-specific quiz that will 
prove your knowledge. 


It's easy as I, 2, 5 


Clerksy can help use your unique business needs. Here's how: 


Time it will take a Clerksy 


rep to follow up: 


24 hours 


Book Free Discovery Call 


Take the coding challenge 
(-40 min) 


Because we value your skills, not 
your CV. 


Record а ó-minute video 
(-5 min) 


We've recorded 3 simple questions 
for you to answer. 


Take advantage of our 
monthly plans starting at: 


$969 USD 


Receive offers! 
(as long as you want) 


Become visible to all companies and 
get matched with the relevant ones. 


14 STEPS 


Three steps to a cleaner inbox 


Connect your accounts 


support all mailbox pro 
iil, Hotmail, Outlook, Liv 


AOL and more! 


Wait a moment while we 


RA find all your newsletters 


earch across all your connected 
j vsletters, 


ription malls 


Start unsubscribing! 


How to get started 


Get your Coil Membership 
for $5 per month. 


F 
Coil Browser Extension 2 


Install the Coil Extension or 
the Puma Browser app. Puma Browser 


есе 


Log in to Coil and enjoy 
Ө web monetized content and 


features across the internet. 


GETITON 
Р> Google Play 


В COMPONENTS 


Your home-buying journey: 
@ Request а lugg | 


tina 


What's next % how Habito can help 


2. Download on th ON 


e GET IT 
€ AppStore P Google play 


Get your mortgage in principle 


Use this to show estate agents you're a serious 


buyer. 


Find a property you like and make an offer 


When it's time to buy, you'll have to make an 
offer and negotiate on the price. 


ш 
Find a mortgage 


We'll find you the best deal out of 20,000 
mortgages from 90 lenders. 


Do the legal work & buying admin 


We pick r item 
You'll need to hire a solicitor or conveyancer © ый ыы уон tems 


before you buy. Their job is to do all the legal 


yur iter 


work you need to buy. 


Exchange, complete & get the keys 


ооо оо 


It's time to move іп! 


Em 


Ө We deliver into your home 


nd tip your | rst 
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Tell us more about your home and we'll let you 


Name 
know your earnings potential instantly 4 
Email Name 
Property Address 
Phone 


Email Address 


Company Name Phone (Optional) 


Role 


Get my instant estimate 


Let's make a new project together. 


Hello! I'm and | work for . We'd like to develop an application. You can reach 


me at to chat about it & schedule a call. Thank you! 


І"уе read the Terms of Use and User Agreement 


Submit > 


Become a partner 


Plug(in) and play with Frame.io. 


FIRST NAME 


LAST NAME 


COMPANY NAME 


= 
т 
с 
= 
4 
т 


HOW WOULD YOU LIKE TO PARTNER? 


Please choose an option 


REACH OUT 


m z 
= o 
> d 
= o 


Write to us 
Full Name Work Email 
Phone Number Company 
Company Size v Country v 


How can we help? (optional) 


Send Message 


Contact support 


Question 


<> 


Select your question... 


Tell us more—how can we help? 


Your email address @ 


Б COMPONENTS 


Want to see Circle in action? 


Watch an on-demand product walkthrough or 
live demo (your choice), and start your free 14- 
day trial. 


© teachable Makerpad GFoRTE LABS 


e 
NESS LABS Spi &- floumingo 


L3 Redesk 


33 Welcome to Redesk! #& 
Create your account 


Email 
Full name 
New password 


l've read and accepted the Terms of Use and the 
Privacy Policy of Redesk. 


Log In 


NEW TO ASOS? ALREADY REGISTERED? 


Log in to Hired with... 


©) 


Email 


Password 


| | Remember те 


Welcome back. 
Let's sign in. 


Enter your email address 


We'll help you reset it so you can get back 


G Google 


Don't know your password? 


Let's get started 


First off, what are your 
first names? 


First name 


Partner's first name 


SIGN IN WITH EMAIL 


EMAIL ADDRESS: 


| | 


PASSWORD: 


Forgot password? 


OR 


SIGN IN WITH... 


G GOOGLE в APPLE 


ЕЗ ҒАСЕВООК м TWITTER 


"It was quick and easy to 
use Hitchd to give a gift 
for my sisters wedding. 
We can be confident that 
they will love what they 
receive!" 


— Kara М. 


Apply Now 


Tell us why you'd be good fit for the role. Please suggest things you'd like to fix or add to our website, APIs, services, 
support channels, etc. 


Name Email 


Maximum of 500 characters. 


Т, Add Resume 


Ly 


Resume should be a PDF under 10MB. 


Optionally, include links to your social media profiles. 


https://twitter.com/ handle https://linkedin.com/in/ handle 


https://github.com/ handle https:// portfolio.com 


Apply 


Places to stay Experiences Online Experiences Become a 


Location Check in Check out Guests 


Where are you going? Add dates Add dates Add guests 


Pickup address 
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First Name Last Name 


Email Address Zip Code 


І am interested іп... 


Yes, | want to stay up to date on the latest in solar! Subscribe me to your newsletter. 


Anything else to add? 


Destination 
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а Security 
e Leads 


PASSWORD PROTECTION © © 
El L NAME IPAN ROLE L A 
TIME LIMITS o 9 
ashleyOclearbit.com & Ashley Taylor e Clearbit Partnerships San Francisco, CA 
VIEW LIMITS © © 
dcancel@drift.com 2 David Cancel ©) Drift CEO Boston, MA 
DOMAIN-RESTRICTED ACCESS © 
elena@tealium.com е Elena Hill > Tealium Digital Programs San Diego, CA 
IDENTIFY VERIFICATION © 
marc@salesforce.com Es Marc Benioff > Salesforce СЕО бап Ғгапсізсо, СА 
payal@classpass.com е Payal Kadakia © ClassPass Executive Chairman New York, NY 
Up Everyday Accounts 
Your Up account is free for most standard use. Interest is charged in the 
event your Up account becomes overdrawn. 
A Limepay Buy now, pay later providers Payment Gateways 
Monthly service fee Free 
Pay in instalments м Yes Yes No XS 33"-34" 26-28" | 32"-34" 33" Direct debits Free & unlimited 
: . | Online payments Free & unlimited 
Branding Y Yours Theirs lot applicable 24.5 36"-38" 29-31"  35"-37" ЗУБЕ 
Deposits to Savers Free % unlimited 
Merchant dashboard Y Full Limited Limited 5-7,5 39-41" 32-34" 38-40" 34" 
Domestic АТМ withdrawals Free at most major Bank ATMs 
Reporting Y Full Limited Limited " " " " " " " 
8-10.5 42"—44 35"—37 41-43 34.5 Domestic АТМ enquiry Free at most major Bank ATMs 
Purchase behaviour insights i 4 % 
9 v Yes No Yes 1113.5 45'48" 38'41" 44"—46" 35.5" International transaction fees 0% 
International ATM withdrawal Free at most major Bank ATMs 
Customers stay on your site Y Yes No No 
XXL 49-53" 42"-45" 47"—49" 36" 
International ATM enquiry Free at most major Bank ATMs 
Accepted ent types м All major cards and Major cards and Varies - usually most cards 
pay digital wallets bank accounts and digital wallets XXL 54"—58" 46"—49" 50"—52" 37.5" 


Overdrawn interest rate 11.23% p.a. 


Dropbox core features 


Storage 

Users 

Best-in-class sync technology 
Integrated desktop experience 
Anytime, anywhere access 
Computer backup 

Easy and secure sharing 


256-bit AES and SSL/TLS 
encryption 


Stock 

AmeriHome, Inc 
AppLovin 

Ascensus 

Butterfly Network SPAC 
Caliber Home Loans, Inc. 


Coinbase 


Coinbase 


Coupang 


Coursera 


Plus 


For individuals 


2 TB (2,000 GB) 


1 user 


1. Ticker 


AHM 


BFLY. 


CPNG 


Personal 


Family 


For families 


Share 2 TB (2,000 GB) 
Up to 6 users 
Y 


v 


Status Exchange 
Filed aii NYSE 
Витоиг@ 

Витоиг@ 

Filed Іш NYSE 
Filed Іш NYSE 
Витоиг@ 

Filed Іш 

Filed a NASDAQ 


Rumour 


Professional 


For individuals 


Try for free 


or purchase now 


3 TB (3,000 GB) 


1 user 


Sector 
Finance 
Entertainment 
Finance 
Healthcare 
Properties 
lech 

Finance 

Tech 


Tech 


IPO Price 


Business 


Standard 


For smaller teams 


Try for free 


or purchase now 


5 TB (5,000 GB) 


3+ users 


14,7M 


23M 


No of Shares 


Advanced 


For larger teams 


or purchase now 


As much space as needed 


3+ users 


Y 


Y 


IPO Date 


LFirst Trust 


db Xtrackers Euro STOXX 600 
UCITS ETF (Acc.) (XSX6) 


ear 


ESED (BRO MEL 


db Xtrackers Russell Midcap 
UCITS ETF (Acc.) (XRSS) 


CSE) Саве) CETE 


ЕМОО Emerging Markets 
Internet & Ecommerce UCITS 
ETF - Accumulating (GBP) 
(EMQP) 


ЕМ internet companies 


ESE) (GBP) (ETE 


First Trust Cloud Computing 
UCITS ETF Class A USD 
Accumulation (GBP) (FSKY) 


n the cloud space 


SES (GBPS (ETE 


Gold Bullion Securities ETC 
(GBP) (GBSS) 


Gold 


ESEO ШӨБЕРЕ (ETE 


Memory vCPUs 
8GB 2vCPU 
16GB 4vCPUs 
32GB 8vCPUs 
64GB 16vCPUs 
128GB 32vCPUs 
160GB 40vCPUs 


Plus only, ISA, 
SIPP 

Plus only, ISA, 
SIPP 

Plus only, ISA, 
SIPP 

Plus only, ISA, 
SIPP 

GIA, Plus, ISA, 
SIPP 

Transfer 

4ТВ 

5ТВ 

6ТВ 

7ТВ 

8ТВ 

9ТВ 


LFirst Trust 


SSD 


25GB 


50GB 


100GB 


200GB 


400GB 


500GB 


db Xtrackers Russell 2000 
UCITS ETF (Acc.) (XRSG) 


ESES (GBP) (ЕЛЕ 


ECommerce L&G UCIT ETF 
(ECOG) 


Ecc 


USES CGBPS (ETE 


Fidelity US Quality Income 
UCITS ETF GBP Inc (FUSI) 


LSE GBP ETF Finance 


First Trust US Equity Income 
UCITS ETF (UINC) 


LSE GBP ЕТЕ Finance 


HSBC FTSE 100 UCITS ETF 
(HUKX) 


USES СӨБЕЙ (ETE 


$/HR $/MO 
0.089 $60 
$0.179 $120 
$0.357 $240 
$0.714 $480 
$1.429 $960 
$1.786 $1200 
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Plus only, ISA, 
SIPP 


Plus only, 
ISA, 


Plus only, ISA, 
SIPP 


Plus only, ISA, 
SIPP 


Plus only, ISA, 
SIPP 


Sign up 
Sign up 
Sign up 
Sign up 
Sign up 


Sign up 
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Starter 
€ 


per agent / month 


Detailed price comparison 


15 


per agent / month 


/ month 


Save up to 24% with annual plans 


Free eSign Essentials 
Upload, send for eSignature and Create docs with templates or the 
collect payment for as many built-in editor. Collect eSignatures 


documents as you'd like. 


Free $19 


and track docs in real-time too. 


MOST POPULAR 


Business Enterprise 
Connect your CRM and automate For teams that require more 
your document workflows from capobilities including integrations 


creation to eSignature. like Salesforce and API. 


$49 Let's talk 


B COMPONENTS 


MOST POPULAR 
TEAM BUSINESS ENTERPRISE 
Modern service desk Company-wide solution with advanced Custom analytics and support 


for small businesses 


55 


workflows and administration tools tailored for your business 


"5 58 


OE Get started Get started Get started 
What you get for it: 
What you get for it: What you get for it: 
O max. 35 agents Create a free account Start a free trial Start a free trial Contact sales Team plan, plus Business plan, plus 
max. 5 agents O Email support (8x5, CET) Unlimited agents 
Email support (8x5, CET) @ Channels: E-Mail, Web Form, SMS Phone support (8x5, CET) | 
ы 2 y Unlimited agents * Unlimited teams * Custom roles 
Channels: E-Mail, Web Form, SMS Chat, Telegram Email support (24x7) o | | 
Standard Features: Text modules, O Standard Features: Text modules, Channels: E-Mail, Web Form, SMS, © veli He legally пи Free plan features cold аы plan [nn plan Omnichannel support * Advanced ticket management “ Location-based machine learning 
macros, multilingualism, ticket macros, multilingualism, ticket Chat, Telegram, Twitter, Facebook inding eSignatures PIUS: pius: PEN ntuitive ticketing Global t t Bl intearat 
i i history, tri schedulers е оскец ы obal team settings ө integrations 
EN ica ae tee branding ' Standard Features: Text modules, Ф Unlimited document Ф Templates Ф CRM integrations Ф 550 support and | 
usiness hours, branding Ы macros, multilingualism, ticket uploads custom user roles ntegrated knowledge base “ Advanced machine learning with self- “ Custom analytics dashboard 
O 10 MB attachments + 10 GB disk O Service Level Agreements (SLAs) history, trigger, schedulers, © Rich media drag and Ф Content library Мы { | { service actions | 
space © Individual roles, individual ticket business hours, branding © Payments drop document editor © Unlimited number of Machine learning for employee self- * International language support 
Ф) Data center in Germany, SSL objects Service Level Agreements (SLAs) | u Ф Custom branding team workspaces service and agent assist * Advanced cross-tool and cross-team * Uptime SLA 
encryption, device management @ Knowledge Base (monolingual) Individual roles, individual ticket Ф Mobile app © Pricing tables Sors ма " | v Aitomatad кой йр warktlovn | 
O 35МВ attachments + 25 GB disk objects Ф Dscumsbtatatufos alestorce integration пуни • Dedicated СМ 
ili DT ; “ Repo - 
space Knowledge Base (multilingual) Ф Zapier integration* Ф User performance and eporting 
€) 15027001-certified Reporting or content reporting * Access and device management 
O Data center in Germany, SSL 50 MB attachments * 50 GB disk ка * HRIS integrations 
encryption, device management space Ө Bulk send е” 
1S027001-certified * Single sign-on 
Data center in Germany, SSL * Advanced and team-level analytics 
Start free trial! encryption, device management 
24/7 email and chat support on all paid plans 
All prices exclude the legal value-added tax. Do you still have questions? Write to us! 
Best choice Feature Comparison 
ESSENTIAL PRO PREMIUM FEATURES FREE UNLIMITED 


Get a different perspective quickly! Let us brainstorm with a team Get advanced research around the results 


from the brainstorming sessions. 


5 О то s 19 то 0 55 


| | . + One creative person brainstorms + Ateam of 3 creative people 
No Credit Card Required — No Risk around your idea. brainstorms around your idea * Ateam of 3 creative people 
оо Documents brainstorms around your concept 
+ Receive multiple concepts / solutions + Give us any proposal you want. 
oo Documents со Pages Per Document or one concrete concept with their | р | | * Give us any idea you want : | Божа 
explanation. e Get multiple solutions / ideas with Yearly С Monthly GET STARTED GET STARTED 
1 Page Per Document Document Management ae detailed explanation . “ иан ирен / ideas with 
letailed explanation 


• One week delivery 


Document Management 


| Мападетеп 
tems Management * One week delivery 


Items Management Without Watermark “ Competition report* e ! — O БМВ — 
Include Fastdok Watermark Priority Support * Potential customer research* a е File Storage © Unlimited Unlimited 
» Market size valuation* Tasks and Projects O Unlimited Unlimited 
Get Started Get Started * SWOT Analysis* Workspace Members O Unlimited Unlimited 
* Get our brainstorming session notes. Collaborate with Guests O Unlimited Unlimited 
* if possible depending on your input Workspace and Subspaces O Unlimited Unlimited 


17 PRICING TABLES Б COMPONENTS 


Quip Starter Quip Plus Salesforce Anywhere 
Best value 
avancado | Best value | e 
Standard 20% Plus “20% е Annual - first 14 days Monthly - first 7 days 
Colaboracáo poderosa para sua equipe ou pequena Plataforma de produtividade segura para equipes Alertas e colaboracáo em tempo real no Salesforce 
$1 2 empresa grandes e complexas para equipes de vendas e atendimento free free 


Signup 2214 йын S25 a 5100 жш €4.83/month, billed annually €12.99/month 


" at €57.99 
Unlimite 
Começar teste gratuito Entrar em contato com setor de vendas Entrar em contato com setor de vendas 


Unlimitec 


Unlimitec Y Documentos e folhas de cálculo ilimitados © Todos os recursos do Starter, mais o Todos os recursos do Plus, mais 
After your free trial, the annual subscription is €57.99 and automatically renews each year. 
Unlimited Y Спа em grupo e mensagens 1 рага 1 У Inicio de sessão único М Editar documentos dinámicos по 
Salesforce 
М Acesso através de PC, tablet e telemóvel ¥ АРІ empresarial e customizacao 
|М Sincronização bidirecional com os dados 
Features ¥ Live Apps personalizados do Salesforce 
Oferta especial 
fisponivel apenas em quip.com М Acesse o aplicativo Salesforce Anywhere 
(beta) Try it for free 
ders А М Casos de uso de vendas е atendimento 
primeiros 
usuários 


Support 


Try it free for 7 days What's your current MRR? 


There's zero cost to get in the product and set things up. 


Your price 


Once you're ready to start sharing your links, 


start your week free trial. 
= $500,000 $500 monn 
еа ч O 
$ 1 per user per user 


per month $ per month 
Need a bigger plan? We've got you covered. We'll 
Un кеме Scheduling Links Everything in Basic, plus: personally help you get onboarded, too. Contact 
Unlimited Calendars Removable SavvyCal branding 


Unlimited Events on scheduling links us 


9 


Sign In 


Sign in with your Sketch Account to access Cloud. Or, if you'd like 
to manage your license, sign in to the License Manager. 


Sign in to Cloud 


Sign in to License Manager 


Design Faster. Collaborate Better. 


Designing the best user experience. Mockplus does it all! 


a 2, ШЕ 


Interactive Painless Scalable design 
prototyping collaboration systems 


Get Started for Free 


Log in to Blinkist 


| @ Continue with Apple | 


Forgot your password? 


By continuing you indicate that you've read and 
agree to our Terms of Service and Privacy Policy. 


You don't have an account? 


Personal 


ount 
iwing and over 


жестед by +! 
ts are protecte 
JO per person 


k transfers 
‘UK bank for fr 


ing money 
om your balan 


support 
you need it 


ions 
nd how you sp 


vogle Pay 
топе 


ries 
your spending 


Business 
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Accounts (New Savings Borrowing 


Compare all features 


Every feature, listed. Find the right account for you. 


Feature 

A UK current account 
Your money is 
protected by the FSCS 
Get paid early 

Salary Sorter 

Fee-free UK bank 
transfers 


Pots for separating 
money 


Award-winning 
support 


Instant notifications 
Apple Pay and Google 
Pay 

Spending categories 
Fee-free withdrawals 
abroad 


Other accounts, in 


Monzo Plus Premium 
Y м м 
м м м 

м 

м 

м м 
м м м 
м м м 
м м м 
м м м 
м м м 

£200 £400 £600 
Y v 


RA 15% off Patch and many more 
ТІ Fee-free withdrawals abroad 


ч, lin +е FANN free avaru ЗП dave 


Features Hel 


'remiun 


rd 
to Monzo Prem 


surance 
is, damage, the 


Зе travel insu 
you and your fa 


on balance ar 
9% AER/Gross 


ed airport lot 
uests can trave 


withdrawals 
O every 30 day: 


sh deposits г 
Ms across the | 
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A) A PUP ABOVE 


SAVE 10% OFF 
YOUR FIRST ORDER 


By subscribing, you agree to receive recurring automated marketing messages at this phone number. 
Reply STOP to unsubscribe. Msg & data rates may apply. View our terms of Service for details. 


г та 


LANE S TET 
Subscribe! © < 
МИ EN DUE ge ae ds EE : 
Sign up to the Rino&Pelle newsletter to get ^ 
- аопе time 10% discount on your next’. 
order and receive the latest newsabout'. 27. 
special offers, collections and events: .* | 


Email address - 


SIGN UP 


-— o9 ev» 
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Open your bank account 
in just 5 mit 


First Name - 
1 


Last Name 


Email Address ' í 


E 
See how you can grow with Clearbit 


Explore our top recommendations for what you can do 


with Clearbit - custom tailored for your company 


Let us guess based on your email ;) 


Get your Clearbit playbook 


А 


JONAS.IO 


SCHMEDTMANN 


SECTION 


COMPONENTS AND LAYOUT 
PATTERNS 


LECTURE 


BUILDING AN ACCORDION 
COMPONENT - PART 2 


HTML 


.accordion { 


} 


display: flex; 
gap: 24px; 
flex-direction: column; 


CROSS AXIS 


MAIN AXIS 


WITH FLEX-DIRECTION SET 
TO COLUMN: 


< align-items aligns items 
horizontally, no longer vertically 


< justify-content aligns items 
vertically, no longer horizontally 


< gap acts like margin-bottom, 
no longer like margin-right 


А 
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SECTION 


COMPONENTS AND LAYOUT 
PATTERNS 


LECTURE 


BUILDING A CAROUSEL 
COMPONENT - PART 2 


HTML 


.btn--left 4 
position: absolute; 
top: 50%; 
transform: translate(0, -50%); 


top: 50% } 


= 50% of parent container?s height 


transform: translate(0, -50%) 


= 50% of actual element’s height 


В 
| 
В 
ш иш иш иш не иш не иш иш MM M 
.carousel 1 
position: relative; 


| 


Ignoring the Х 
(horizontal) value 


А 
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SCHMEDTMANN 


SECTION 


BUILDING BEAUTIFUL 
COMPONENTS 


LECTURE 


WEB DESIGN RULES #10 - PART 2: 
LAYOUT PATTERNS 


HTML CSS 


Q ROM 


Text 

Buttons 
Images 

Input elements 
Tags 


о 0 4090 о юг 


Breadcrumbs 

Pagination 

Alert and status bars 
Statistics 

Gallery 

Feature box 

Preview and profile cards 
Accordion 

Tabs 


10. Carousel 

11. Customer testimonials 
12. Customer logos 
13. Featured-in logos 
14. Steps 

15. Forms 

16. Tables 

17. Pricing table 
18. Modal wingows 


This lecture 


1. 
2. 
3. 
4. 
5). 
б. 
7. 
Ө. 


Navigation 

Hero section 

Footer 

Call-to-action section 
Feature row 


Row of boxes or cards 
Grid of boxes or cards 
Z-pattern 

F-Pattern 
Single-column 

Sidebar 
Multi-column/magazine 


Asymmetry/Experimental 
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> secureframe Products ^ Why Secureframe For Auditors Blog Company v Sign In (8) abyssale Product v Pricing Integrations Company м Sign in Try for free 


SOC 2 Р Blog & newsroom 
News, tutorials & articles 


oo 
44 


© 150 27001 72 Help center 

Ressources to get you started 
po . еге 
09 Integrations G "S 

Changelog 


B | Scale your business with 
Our platform updates in one place Hands-free Dropshipping 


© Shipnet Visit the 


prod uction in ІТ б Авошче Colosseum 


Plan your next 
summer trip in Italy 


Streamline your 
secu rity CO m pl la nce p p Gain hours of work on banner creation. — 7 


| А ог your money back 
Abyssale gives you the freedom to generate social & т any matress for 100 nights 


Book now 


Secureframe helps organizations get SOC 2 and ISO 27001 


System Monitoring Vendor Management advertising banners online in minutes. 
| — та Build your first Al Chatbot 
compliant the smart way пәл) ЗИД cong site required ETI 

nae @abyssale \ „ан 

Get started now Boost your ~“ 
гемепце Бу 20% Generate bannersin | 
Reduce shopping cart 
ee re minutes 

Gaio accom Improve now your advertising process 
| ——m 


g & Hàndlersuche (PLZ) › 


PORSCHE Suchbegriff eingeben Q 


Modelle | Fahrzeugsuche Online kaufen Motorsport & Events Service 4 Zubehór Unternehmen Car Configurator » 


ı Motorsport ж”. Beratung & Services + 


3 | -Е- (5 nomads For Companies For Engineers Events Resources Remote Jobs Blog 
а Porsche Experience . : E 2 


4 4 2 | Remote work productivity 
"| Porsche Clubs ГА | - tips 


. . Remote tools 
Porsche Tennis Grand Prix 


Porsche Golf 


Porsche Partner Forum > ы 4 Find a full-time 
Sportscar Together Day | > remote job In a tech 
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Products Developers Company Pricing 


BUSINESS OPERATIONS 


PAYMENTS 


Last 4 weeks “ = July 


Q Search 
Payments e Radar 
Online payments Fraud & risk management 
Today 
Connect E Sigma 
Payments for platforms Custom reports Gross volume v A 
€3,528,198.72 € 
E 1:00 PM 1: 
Billing А Atlas 
Subscription management Startup incorporation 
ES ——— ——4 
Invoicing - Climate [2:00 AM 
Online invoices Carbon removal 
" Reports summary 


eintern 


Card Information 


Number visa | ~ Gross volume +46% 
€4,542,345.45 


MM 7 YY смс 


ЅНОР LEARN IMMUNITY care/of SIGN IN о ци Take the quiz 


VITAMINS POWDERS EXTRAS : 
Letter Vitamins Collagen Quick Sticks E “9 
Minerals Superberry Merch | 4 

> = N 


Herbs Protein 


Meet the Skin + Hair 
Collection 
SEE PRODUCTS 


Probiotics Maca 


Specialty See all 


See all 


Products Developers Company Pricing 


EF Documentation 
Start integrating Stripe’s products and tools 


GET STARTED GUIDES 
Prebuilt checkout Accept online payments 
Libraries and SDKs Manage subscriptions 
Plugins Send payments 
Code samples Set up in-person payments 
= Full API reference A, API status 
(2 Support © API changelog 


> ІКСОГПСІ =e 


MM / YY сус 


9, workable Why Workable Product ~ Customers 
Find > Evaluate > 
Vl Careers pages C5 Hiring team collaboration 
Q, Built-in sourcing [=] Structured interviews 
Үү Candidate experience Q) Video Interviews = 
© Referrals 
tH Language options 


Q Search 


Today 


Gross volume v А 


€3,528,198.72 е: 
1:00 РМ 1:0 


zine 


КЕ 
БЕРЕ 


12:00АМ 


Reports summary 
Last 4 weeks v æ July 


Number visa ЩО m Gross volume 44.696 


€4,542,345.45 ( 


Automate > 

<> Applicant tracking 
/~ Reporting 

& Compliance 

59 Hiring Plan 


® Texting жн 


/ 


Тһе ууау you wor © All features > ЁЗ Partners & Integrations > 


is evolving. Is your 
hiring software? 
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& Sketch 


For Designers 


Get Help > 
Read our documentation and FAQs, or get in touch. 


Events & Meetups > 
Discover and join your local Sketch community. 


Mar 12 Build HTML prototypes faster with Sketch2React 


Mar 18 6 Erreurs а éviter pour faciliter vos workshops UX ! 3 


O dscout 


s= Diary 
A robust, flexible tool for unmoderated research 


‘©: Live 


Built to enhance your 1:1 user interviews 


2% Recruit 
Choose from our panel of 100,000+ participants 


=© Express 
Get media-rich responses within 48 hours 


Fieldwork quality insights 
made affordable and agile 


Press “go” on your study, then return to the platform with 


For Teams Resources ^ Pricing Signin Тгу Тог Егее 0 avocode 
um Extensions > 
BB Do even more with Assistants, plugins and integrations. 
<> Inspect 


Get all assets, specs, and code. 


Blog > 
Get updates, articles and insights from the team. 


EH 


[3 Design Hand-off 


In the fast lane: What are Design Sprints, and why should ... . : 
Share designs without extra work. 


Inside Sketch: What happens when you save a document t... 


Review & Comment 
Give feedback and discuss changes. 


Objective-C: How Brad Cox's programming language has ... E 


Product 4 


Solutions У Learn т 


$) Versioning 
Track changes for every design. 


E] Pixel Checker 
Visually test your coded designs. 


@ Changelog 


Product updates and features. 


Blog Download Pricing 


Sketch 


Figma 


Adobe XD 


Photoshop 


Illustrator 


B ва +» € 


All Integrations 


Open Design 
Do you want to work with design file 
data programmatically? 


Learn More > 


Convert Figma to Sketch 
Open Figma designs in Sketch. 


Try Now > 


Convert PSD to Sketch 
Open Photoshop designs in Sketch. 


Try Now > 


Platform + Services У People Nerds Be a scout 


C SWINGVY PRODUCTS v PRICING PARTNERS 
Related Reading PRODUCTS 
TE a u 
at mg 10 Underutilized Strategies for Remote, n 
ЕШ 3 Unmoderated Research me HRHub = Leave 
5 


Modern HR software that 
puts people first. 


Sharing is Essential: Collaborating + 
Socializing Insights with dscout 


А Payroll 


People Nerds: A Start-to-Finish Guide to 
Remote User Research 


Compliant payroll software to 


simplify payment processes. 


“ NEW 


У; Y a: o 


Leave management software 
that integrates with your 


calendar. 
е Е 
Ж Benefits 


Manage medical insurance 
benefits in the HR platform. 


COMPANY v 


е Time LITE 


Time % attendance tracking 
to simplify team 
management. 


е Mobile 


HR management in your 
pocket with Swingvy mobile 


app. 


E ШЕМ + "е че Аы LAARA 4 


everything. 


SIGN IN REQUEST DEMO 


е 


Claims 


Submit and manage expense 
claims on the go. 
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Why PandaDoc? ~ Solutions ^ Pricing 


PandaDoc 


For Sales Teams Construction 


Education 


For Marketing 
| Financial Services 


For Revenue Operations Healthcare 


Manufacturing 


For Customer Success . . 
Professional Services 


Software & Technology 


All industries » 


PRODUCTS v 


С SQUARESPACE 


Squarespace Blog Help Guides 


Stories and solutions for the modern In-depth guides about the platform, our 


entrepreneur services, and how to get started 


TEMPLATES 


Resources ~ Integrations 


SE CASE 


Proposals 
Quotes 


Contracts 


eSignatures 


Forms 


Log in Start free 14-day trial 


All use cases > 


RESOURCES ^ 


Webinars 


Free, online sessions where you'll learn 
the basics and refine your Squarespace 


skills 


Forum 


Squarespace Forum is an online 
community for Squarespace users and 
professionals to discuss best practices 


and seek advice 
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“>! PandaDoc Why PandaDoc? ^ Solutions v Pricing 
ка == q 
[I 4 D 
Es d 
Product Tour Speed Experience 
Capsule Features ^ Pricing Integrations v 


Overview > 
Everything you need to know about 
Capsule and how each feature will 


benefit your business. 


ж 


Contact Management 


Giving you an overview of the people 


and companies you do business with. 


Resources v Integrations 


Insights 


Solutions ч Blog Support 


Tasks & Calendar 


Create tasks for appointments, 


meetings, phone calls and more. 


© 


Login Start free 14-day trial 


Workflow 


Log in ELS free 


n 


Sales Pipeline 


Get a complete summary of your 
opportunities with our sales 


dashboard 


Sales Analytics Security & Permissions Customization 
Monitor every aspect of your sales [he security of your data and earning Capture the right information with 
cycle with our reports and gain your trust is core to our culture. custom fields or just customize the 
insights look. 
Capsule for Mobile 
Teams 
ul Manage what matters most to you д ; Е 
E Designed for growing businesses. Manage teams, 


anywhere you are with our app for iOS and 
segment data and track team performance 
Android 
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(L 


Phone 12 Pro 


Ш 


Phone 12 


iPhone SE 


Watch TV 


0 D O Un 


iPhone 11 iPho 


ne Хв Compare 


Support Q 


т E 


AirPods 


Accessories 


Apple Card 


Get 3% Daily Cash back with Apple Card. And pay for your new iPhone over 24 months, interest-free when you choose Apple Card Monthly Installments.* 


EE Microsoft 


Software 


Windows Apps 
OneDrive 
Outlook 

Skype 

OneNote 
Microsoft Teams 


Microsoft Edge 


Microsoft 365 Office 


PCs & Devices 


Computers 


Shop Xbox 


Accessories 


VR & mixed reality 


Phones 


iPhone 12 and iPhone 12 mini 


Blast past fast. 


From $29.12/mo. or $699 before trade-in' 


Windows Surface Xbox Deals 


Entertainment 


Xbox Game Pass Ultimate 


Xbox Live Gold 


Xbox games 


PC games 


Windows digital games 


Movies & TV 


Buy 


Support 


Business 


Microsoft Azure 
Microsoft Dynamics 365 
Microsoft 365 

Microsoft Industry 

Data platform 
Microsoft Advertising 
Power Platform 


Shop Business 


VIEW SITEMAP > 


Developer & IT 


.NET 


Visual Studio 


Windows Server 


Windows Dev Center 


Docs 


Power Apps 


HoloLens 2 


a а 


ЕБЕ ее | 


Microsoft Rewards 


Free downloads & security 


Education 


Virtual workshops and 
training 


Gift cards 


Licensing 


Microsoft Experience Center 
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ICELANDIC 
MOUNTAIN GUIDES 


1 n. on lo ои 
Sölheimajöl 


Price from > 
62 EUR 


Products & Solutions Y 


The essentials => 


Top products € plattorms 
Industries 

Artificial intelligence 
Automation 

Blockchain 

Business operations 
Cloud computing 


Data & Analytics 


eG TAILOR MADE 


Services & Consulting Y 


DAY TOURS MULTI-DAY TOURS 


| See all Day Tours 


Learn € Support ~ Explore more Y 


The essentials 


Explore the IBM hybrid cloud and Al 
solutions you need to modernize your 
business 


Hybrid cloud 


Artificial intelligence 


THEMES 


ATTRACTIONS 


Meet'oñ h location: 
Myrdalsjókull 


Price from 


98 EUR 


Search 


ENGLISH м 


EUA Q 


Ice s 


Price from 
91 FUR 


O 
J 
||| 
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QUAE 
% Lap 


Q BO rr |EN x x SILVER. OAK X Close 
DISCOVER 
PRODUCTS Shop PLAN YOUR VISIT 
RECIPES 
A 50-YEAR-LONG STORY Visit WHAT'S ON 
SUSTAINABILITY 
CONTACTS Explore 
Homepage 
WORK WITH US Food Ticketing 
Calendar 
Access & practical information 
About Interactive map 
Blog 


SUPPORT VERSAILLES 


Subscribe 


Help 


Contact Investors About us Careers С Businesses (2 ©) Q GE 13.60 


TWOMEY TIMELESS 


GE leadership Over 125 years of innovation. 


History Explore a timeline of GE technologies that have spurred 


History 


Diversity transformation across the world. 


ESG 
FAQs 


С) Search or jump to... Pull requests Issues Marketplace Explore 


Я facebook / react O Watch ~ 67k y Star 165k t? Fork  33.1k Contact us 


COVID-19 
Code O Issues 566 Pull requests 166 Actions Projects Wiki Security Insights 


Booking.com : Ө, List your property 
(2) Stays %> Flights & Car rentals $$ Attractions Тах Airport taxis OVE RL AYS 
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4 Sketch For Designers For Teams Resources v Pricing Signin Try for Free zendesk Products Pricing Solutions Demo Services Resources 


The ultimate design 
toolkit 


Do your best work with a powerful, native macOS app, do even more 
with plugins and extensions, then collaborate with cloud-based tools 
that take your designs further. 


The Basics Design-focused Components & Prototyping & Native to macOS Extensions 


Design Systems Collaboration 


BLU EWAVE SOLUTIONS COMPANY RESOURCES 


о о 
i о о a COMMUNITY SOLAR PROJECT SERVICES 
MQ Community Solar 7) Community Solar > 


CS Project Services 


CS Sales Partners 


share in s 
|у Solar Development > 
good — 


Our Projects 
Solar energy savings, no roof i 


homes, businesses, & towns di 


Our people 
are your people 


Our team offers an effective combination of broad customer 
service expertise and deep product knowledge to help you 
deliver a differentiated customer experience. From a 
strategic implementation to always-on service, we make 
sure you get the best value out of Zendesk. 


Download the guide 


Get started 


YY. Customer Experience Overview Professional Services Training Customer Service 


Log In 


ІЙ shopify Start Sell + — Market » Manage v Pricing — Learn» Login 


Shopify Online store | Overview Features Examples Themes 


SALES PARTNERS 
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ы» CleanShot Х Changelog License Manager FAQ Contact us Log in to Cloud Leave Me Alone Learn more ~ Pricing Log in Start unsubscribing > 


Apple M1 £ macOS Big Sur ready! MO 
- 
Ld 


Capture your Mac's 


screen like a pro. Easily unsubscribe 


t d il Black Friday Cact... one dav only 80% off your 
ҮЕ from unwanted emails NP 2. | 
See all of your newsletters in one place апа 
РБЕ unsubscribe from them with a single click. 
Try me! 
CleanShot is a super powerful replacement for - 4 | 
ы the macOS tool. It works exactly how | need it to. | Start unsubscribing for free > 
' DanielZarick, Arrows.to | 
>, у = ы 
55%8308 688 
Join 37,967 people like you who have : ши 
unsubscribed from a total of 541,116 emails | i» | ( М PANY ma ker 


Beyond eSignature: 
Document automation 
for fast-moving teams 


The modern 
way to build 
for the web 


Webflow empowers designers to build 
professional, custom websites in a 


Oo oo o EJ 


= 
We are Petal. 


Improve your document workflow to allow 
for increased productivity and to deliver 
an amazing experience for your 


completely visual canvas with no code. 


Get started — it's free 


zendesk Rakuten DLL Upwork X Lattice getaround У HELLOSIGN Petal 


customers. 


Start free 14-day trial Request a demo 
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All-in-one 
employee financial 
wellness platform 


Dedicated financial experts, an app to guide and track your 
progress, and automation that optimally moves money to 


2 


Bathroom 
renovations, 
Made easu. 


implement your plan. 


We combine premium design, materials, 
and construction for an all-in-one, 
renovation experience. 


Book a Free Consultation > 


Let us guide a full spectrum of your employees' financial 
and life situations. Help employees budget, save, pay off 
debt, invest, and create a smart financial plan for today and 


the future. 


Get in touch 


2) Digital Asset Management 


УА FABRICATE = 


кен Тһе centralized solution 


The only all-in-one = st Азын 
analytics tool for КЕ: to manage and distribute 
email newsletters digital content 


Prove the ROI of social media, plan more engaging content, and 


+ 218 


FABRICATE УД FABRICA 


ecosystem. А single source of truth for all your digital assets, DAM 4- - Т EE ДЕ 
Ы лије ME. = 4h 


Build the future... 


create automated white label analytics reports. ensures maximum value from your digital assets and 10096 brand 


O 6,822 likes 
Get started for free > fernandfable Maybe we love houseplants 
because they're such good listeners. 


#plantstagram 


consistency. 


Book a demo Free 30-day trial 
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Selling is Personal 


DO 
BETTER 
WORK 


Lessonly is the powerfully simple 


way for teams to learn and — " 
Е я М ! Doing Better Work 
practice like never before. - p 8 ЕШ 
SEE A PREVIEW | | | 
7 “ m А 


" Want spicy wings? 


Food, drinks, groceries, and more available for delivery and pickup. 


ES 0 Enter your address... 


Agile Customer Service 


Estate planning 
Create the popups your made easy. 


With plans starting at $39, we've got something for everyone. See 


visitors deserve to see е 


ж Trustpilot 


Get more leads and sales without annoying your visitors. 


Start your free trial 9 Get a demo from Mathias 
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The Sill 


Shop v New Arrivals Ready to Ship Кетв Online Workshops Store Locations О, Search Log In Cart (0) 


йу 2075 
s T reMarkable 2 


thinnest | [A (СЕРЕ. The next-generation paper tablet 


a | u? de | ` | DEFINE ( Replace your notebooks and printed documents with the only Your Lushest 
Season Yet 


tablet that feels like paper. 
Bring the outdoors in with our bundles & new arrivals. 
(>) Watch video 
Shop Now 


СЭ Scroll to learn more 


9:41 әп = ша 


Ln 9 Take control of Ios 


Show — Megan Lee 
+ 2.5% 


Voice chats eos your crypto - 
fo r әуе FYO n а n ” Everyday spending — Turn crypto into dollars uu 


e А 4-7 Ф Safer storage — Leverage multi-sig security "m — 
Join interesting conversations, % % © 


en n mE Travis Flexible finance — Manage funds across platforms Bitcoin Cash $368.08 
B +2.7% 
meet new people, and build е A | 
| а B y э Ethereum $177.21 
> +0.5% 


meaningful relationships pres .. ы 5 


Ф г з + 
4 Download on the >, GETITON и " | : ee : 
a App Store > Google Play u 5 = аа 
i ы © 
Leave Invite Raised 


GET IT ON 


|" Google Play | $0.2050 


+ 0.5% 


# Download on the 


a App Store 
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Ce uscreen Were Hirine! Platform v Examples Pricing Resources v About v SILVER OAK 


We help brands sell 
videos online 


From individuals to fortune 500 companies, we help brands Pairs With Cabernet 
of all sizes monetize & distribute videos online. 


FROM THE SILVER OAK KITCHEN 


Learn More ( >) 


RECIPES 


ho GOOD SLEEP DOESN'T 
HAPPEN OVERNIGHT. 


One workspace қ aac је 9. IT'S ENGINEERED. 
Endless solutions? “= а/ CC нә | 


The ultimate hybrid. For a longer. 
Deeper. Cooler sleep. 


Orchestrate powerful business solutions 
with a single source of truth. The only 
limit is your imagination. 


For HR people who 
do everything. 


REQUEST DEMO 


#6 


| магк | 
+ 


Where distributed 
teams get work done 


The online collaborative whiteboard platform to 
bring teams together, anytime, anywhere. 


Start a whiteboard > 


= 


4 


TA = 
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THE GROWTH CONTENT COMPANY 


Attract leads with content 
you're proud of. 


Grow your brainiac B2B company with a data-backed 


y strategy and authentic content. 
| 58, 
| r 
| 


The modern community 
platform for creators 


Bring together your discussions, memberships, and content. 
Integrate a thriving community wherever your audience is, all under your own brand. 


Start your 14-day free trial 


Е С ч -e е 
ModernMind Q Вод 9 
"ncm MEMBER s 
Ў Live session 42 - Mindful parenting 
A Getting started € Nicole C 
ЯУ Introductions 9 Adelle Farley 
% Eleri B 
18) Jena Har 
9 Pierre Wall 


MODERATOR 


ам 
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mag ic 
Work the way that works for you P 


What would you like to manage with monday.com Work OS? 


9 e 
(1 Project Management (1 Marketing | CRM and Sales | | Creative and Design [ | Software Development | h e Wo r | d S ! | rst 


[_] Task Management | Construction | HR and Recruitment Оп | | 200+ Solutions Р r | t | 1 Г) ri | 
Get Started > 


kKkkkk 


30-40% More 


Monthly team planning e.. Productive 
This month Owner Status Timeline Due Priority © “lve never considered an energy 
| Finalize kickoff materials Q | ooe | C 0ct12 жжжж drink that also helps combat stress. 
Q3 project overview Refine objectives 3 == баз kkk vw Coffee only wakes me up... This 
makes me focused and more 
Identify key resources а == о жж d = > 
А ; Tear zat © productive. 
— ы емеш e — | 
== 
Next month Owner Status Timeline Priority © А а % Ату J. 
| Update contractor agreement $ ee) Nov 28 жжжж 
те 
Conduct a risk assessment 5 Nov 21 жж * 
| Monitor budget 4 eu N ***+% 
Develop communication plan g Seri N 3 жж 


ЕӘТОМРАХҮ POPULAR SCIENCE GEAR PATROL 
15 best productivity apps of 2020 100 greatest innovations of 2020 best new tech products of 2020 


. Email’s new heyday 
Bu | іа beyond you r Email sucked for years. Not anymore — we fixed it. HEY’s 


fresh approach transforms email into something you want to 


ex pectat | О n & use, not something you're forced to deal with. 


Sanity is the ultimate content platform that See how HEY works 
helps teams dream big and deliver quickly. 


еа СС or Contact us 


Already know you want HEY? Start your free trial. 


| 34 Screen 5 first-time senders + Write 
cid кад 22 Imbox S 
М. ү; ti vacat х Р 
POWERING EXCEPTIONAL DIGITAL EXPERIENCES EVERYWHERE 2 с ~ er decree — i e урина 
Yes No tme W kt y ew 


Paper Trail 


© Autobody repair? 


. © Bradley Maine invited you to Basecamp (Picture Perfect Pools АТХ) 


Reply Later 


мтом £netlify dm” B Fima SONOS flex 


All Files 


P ~ Нарру26 
LABELS Al fies sent by everyone 
F Famih = = 
% Friends & Family MES “= E Grammar Practice Guide 
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Join the sleep fitness movement 


Upgrade your sleep before the end of the month. 


GET THEPOD 


Design-Driven 
Product Development 


Powerful. Predictable. Scalable. 


Get a demo 


9 жжжжж 73M TIME FSTOMPANY 


Trusted by experts Rated by real people Hours of sleep Best Inventions Most Innovative 


improved 2018 and 2019 Companies 


Design your own beautiful brand 


Use Looka's Al-powered platform to design a logo and build a brand you love. 


Enter your company name Get started 


Excellent 7,000+ reviews on X Trustpilot 


Dog Food. Reimagined. 


Build your dog's personalized meal plan 
with honest guidance and real ingredients. 


LEARN MORE 


“” 


e 


Birdland 


= liverecover 


Turn more of your abandoned carts into sales with 


personalized text messages by real people. 


© Copyright 2020 by LiveRecover, LLC. All rights reserved. 


©) VisualEyes VisualEyes 


Copyright O 2020 Loceye 
Create Account 


in ¥ e s 
Log In 


Pricing 


Status 


té Blinkist 


Big ideas in small packages 
Start learning now 


4. Download on the GET IT ON е. “Alexa, oven Blinkist.” 
“ App Store Google Play ‚op | 
© Blinkist 2021 | Sitemap | Disclaimer | Terms of Service Privacy Policies 
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Pricing 
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Contact us Our Story 


Follow 
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Newsletter 
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COMPANY 


About Bynder Legal Security 
Careers Bynder 8 GDPR Technical 
Press and media Bynder € CCPA Developers Portal 


About Us Workflow Solutions Resources Learn 


Home Company Project Management Asana Guide Create a Marketing Plan Contact Status Features Index 
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Ө FULCRUM Projects Contact us: Lean Canvas: 


trust 


ES ill Get Started 
WI Services 


About 


PRODUCTS RESOURCES COMPANY Questions About Our Plans? 


Trust Learn About Us Talk to our support team 
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Guardian Reviews Chat with us now or call us at 
1(866) 908-7878 


Blog 


@fulcrum.rocks 


Will FAQ Careers 
Estimate app 


Advisors 


Pricing 
Contact 
961 W Laurel St 


San Diego, CA 92106 Privacy Policy 


Newsletter 
Е А В қ Subscribe 
Subscribe to our newsletter for expert estate planning tips, trends and industry news. 


Reinvent M ^ | 
your space, — —M 


with us. —— | | XT 
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JOIN MINDFUL MONDAY 


SUBSCRIBE 


Get started with PandaDoc today 


Would you like to see Narrative 


А А No credit card required 
Bl in action? 


Leave your email address to discuss how 
your company can get first actionable 


insights today 


Enter your work email address Get a demo 


Get started with Trendmo for free — 


Optimize your marketing workflow with Trendmo. Start analyzing actionable, 


comparable insights across social media, email marketing, ecommerce, paid ads, м Free 14-day trial Y No credit card required м Cancel at any time 


and more. 
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Sourced Locally, 
Made Fresh, 
Delivered to You. 


Starting at $7.49 per serving 


Our real, whole ingredients come from local suppliers who 


No commitment. Skipping or canceling meals is easy. share our values. Meals are cooked to order in our USDA 


CHOOSE YOUR PLAN 


certified kitchen just days before arriving at your door. 


GET 20% OFF NOW 


Start protecting your website visitors’ 


Ready to find your я 
privacy today, for free 


next home? 


We have homes in 12+ cities across the 
country to choose from 


Start your search 


Fathom is simple yet powerful website analytics. Our pricing starts at 
$14/month for 100,000 page views and you can cancel anytime. 


Get started for free View a live demo 
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Free until you're а ааа 
геа ду to E u L C h Se Lattice zendesk Rakuten 


Build your site for free and take as long as you need. 

(That's right, no trial here.) Just add a site plan for more 

pages, and a custom domain when you're ready for the getaround (Ж. PACIFIC LIFE Petal 
world. 


Get started — it's free 
V HELLOSIGN 


Get it done faster 


Get CleanShot X Master all of the magic keystrokes for your favorite 


apps & tools. 


Don't hesitate, we have a 30-day money-back guarantee. 


00 14 26 29  Buyfor$20 


r Days Hrs Mins Secs 
Buy now Upgrade license 


25% off today · 30-Day Money-Back Guarantee 


v One-time purchase ~“ Cloud account included 


04 CALL-TO-ACTION SECTION 


Renovating is hard, 
we've got your back. 


Youre on the way to the easiest renovation ever. 


Book a Free Consultation > 


x % 


Email Us Call Us 


concierge@maderenovation.com (888) 560-1069 


WE'D LOVE TO CHAT! 


GET TO KNOW US 


START YOUR TP ROJEC TOPODAY 


CONTACT US 


C SECTION COMPONENTS 


Where to find us 


Our nationwide network covers many locations, 
and we'd love to talk with you about a home built 
around you. 


View Locations 


Call Us 


0800 456 456 


Ready to create a unique experience? 
Let's get in touch! 


LET'S 


Start a Project > 
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Dina gets business through her 
online shop 


"| love using Typeform because | don't have to go 


back and forth via email to give people an estimate. 


It’s a simple introduction to my process that helps 
my business run smoothly.” 


Read more > 


Our Story 


We're on a mission to make plant-centric, 
wholesome food accessible to everyone. Our 
meals are hand-made with care, packed with 
natural, mindfully-sourced ingredients, and 


delivered sustainably. 


LEARN MORE ABOUT OUR STORY & FOOD ETHOS > 


Were with you 


Once you have your tailored plan, we'll help you stick with it. 
Track your supplements, learn about how they work, and get 
new recommendations as your health changes, all in our handy 


app. 


Say hello to your new healthy habit. 


Take the quiz 


Strive to be "m. 


We choose vendors who champion sustainable practices 
You'll find vendors who use local, seasonal ingredients, 


reduce waste, and demonstrate environmental 


responsibility. 


Amplify other channels 


Using Hustle doesn't mean overhauling your entire 
communications strategy. Instead, it makes people 
more receptive to other channels. Text to schedule a 
call and they're more likely to pick up. Alert them to 


an incoming email and they're more likely to open it. 


< Thank Cyan Contribution: $250 


TO: Cyan Masters 


FOR GIFT: Camelback Tour in Marrakech 


Dear Cyan, 
Thank you so much for the generous gift! 
Here is a photo from our tourn on camelback in 


Marrakech. It was 100% the highlight Morocco. 


All our love. 


| ана 


Simple. 


Enjoy your trip and 
thank guests 


Once funded, it's time to start your adventure together. Share 
your gratitude and experience by sending a personalized thank 
you message to contributors. Include a photo from your trip to 
add a personal touch. 


Start your adventure 
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Unlimited products 


Add and manage products with an easy-to-use 
interface that scales with you and gives you 
complete control over how products are 
arranged. 


Rich product listings 


Give shoppers the best browsing experience 
with rich product descriptions, embedded 
videos, images, related products, and more. 


Product catalogs 


Show products organized by category and help 
customers find exactly what they're looking for 
with intuitive menus. 


SUMMER 2020 


эое NOW 


Make a logo in minutes 


Forget looking generic! Looka's software is powered by Al to 
create a logo that matches your vision — no design skills 
required. Generate endless options, and tweak designs to get 


exactly what you want. 


С SECTION COMPONENTS 


xs ~, . а Messenger 4) Моп0941АМ Q шш 
We design great user ше | ‚= Quick Access 
interfaces that empower Se al m 


Our overlay makes sharing a breeze. Instantly save, 
copy or drag & drop screenshots or screen 


us E 
эф» recordings to other apps. Whatever your workflow Та 


people and drive value 


We know what makes interfaces great: seamless { 
| mE ex ме looks like, it's going to fit. 
journeys. Our team merges expertise in CX, UX, and Ul "ms oe ser | going 
as «e? & 7 «e 
design to craft seamless processes and products. 7) > 2 > Watch the video 
Even when users interact with your product across 4 
devices, applications, and (real-world) touchpoints. 
PP ) р N The essential swiss army knife for screenshots, © 
That's how we empower people and drive value. markups, and GIFs. Every Mac owner needs this. 
Tyler Tringas, Founder at Earnest Capital 
Making complex applications seemingly simple is > 
БУ 
what we do best we 
А $ 
Lo ¿ee 
e 

(= Robin Humphreys <> 

“ 

e 
Stay organized. Show up 
prepared mies Toad йын» 24/7 customer support 
Our team is here to provide you with personalized and 
Sales Team Updates 
РА outstanding service. We also offer a range of self-learning 


Agenda templates and timely reminders help you 
tools in our support center: 


build better meeting habits without much effort. 


Ө Knowledge base Ө Daily webinars Ө Community 


H1 For the meeting itself — the actual oomph is in the notes. It's an 


alignment moment euen before the meeting starts. 1 

Share with attendees 
Tasha Gideon 
4 Verrah 


Visit our support center > 
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№ Solar Development 


е PRIVATE This board is currently private 
We work at the forefront of responsible solar PRIVACY CONTROLS 


development. Partner with us to develop innovative 


utility-scale solar. Share publicly or 
Copy 8 share this link privately 


https://usebolt.io/fJa9LitO Copy 


Create public or private boards to control who you 


Learn More 


Invite via email | и | 
Private boards are invite-only in order to keep your 


Enter their email Invite designs private. Public boards allow you to share your 


share your designs with. 


designs with anyone, using a simple link. 


А Developers and Property Owners > A 
| . tylerdamienQ gmail.com Revoke access 
Learn how our experienced team can deliver 
Р — lucythompson@workday.com Revoke access 
solutions that let you maximize the value of 
your land. 
4 Hi Sam, welcome to Voiceflow Banking! I'm Mia, your 


personal banking assistant. | can help you with things 
like transfering funds, or checking account balances. 


You've been invited to have a 


conversation with Banking Bot What can | Halo youth today? 


PROTOTYPING & USER TESTING 
е с 
Lightning fast 4 
ө 
prototyping TRAINING 


TRENDMO FOR TEAMS 


Seamless client and team BG BrianGriffth Мене 
member management 


Streamline your workflow with flexible team permissions, and Voiceflow's advanced prototyping O Trained ane 


customize access levels across clients and collaborators. Share capabilities allow for robust testing © Untrained 27.18% 


right in-browser, or on-device. 


Gabby Moreno Account Manage 
Assistant model has changed. We highly 
cfa ? Be : 
recommend training your assistant Transfer Funds Account Balance Open New amps 
Train Assistant “ a 


actionable insights with marketing, sales, or product teams in just a few 


clicks. 


Why teams love Trendmo > 


01 ROW ОЕ BOXES/CARDS 


Sleep tight and wake 
calm the storm. soothe your joints. up refreshed. 


Quiet your mind and Ease your pain and 


$ POPULAR ' , қ : - M Р | XX NEW TOUR a 


a > 
de POPULAR 


FROM MYRDALSJOKULL ALPINE SKI TOURING 


FROM SOLHEIMAJOKULL 


ATV Black Beach Safari | The Volcano Ski Touring 
and the Plane Wreck Glacier Discovery Challenge 
[— ап-уеаг =? 2 hrs [eu] 130 Е дуваг 23 ~ З hrs [Eur 68 ИШ May - June =? 6 days [evr 2,541 
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Accelerate every stage of the deal cycle 
with PandaDoc 


Proposals Quotes Contracts eSignatures 

Simplify the process to Create interactive, error- Create contracts fast Save time and keep Collect payments with 

create proposals. free quotes. with pre-approved deals moving with signatures to get paid in 
templates. eSignatures. as little as two days. 


55 


Consult Match Collaborate 


Schedule a consultation Get a Custom Talent Plan Meet Your Tea 


Chat with one of our executive 


finan 


Q = e 


Get creative Find a perfect Easily edit and Repurpose 
video video for your publish your and promote 
marketing story videos 


clips, images, and music easy and powerful video 


Always have fresh 


content to post on social or search the built-in editor. Add your tune your video 
media and beyond with stock library with 300 message and logo. appearance with the 
million assets. customizable player. 


the Wave.video free 
social calendar. 


Learn more > Learn more > Learn more > Learn more > 


Y. 


Deploy and share securely 


Retool comes with the security, reliability, and permissioning built in. Contact sales > 


Learn more about enterprise features 


eo Releases History х 


heroku login 


heroku qit:remote -a YOUR_HEROKU_APP_NAME Add query2 (SQL query) - select Id, rom Opportunity wt 
1/29/2020 « 11:32:31 AM 1 + select Id, Name, CloseDate from Орр 
commi w-empty -m 'Redeploying' StageName - 'Closed Won'and 
push hero Renamed query 8 to TaskA has been invoiced c - false and 
ns in ^^ Aena ажа (not Name like '%[VERTFY1%' ) 
Host о premise Revision history via Git 
You can t Retool on-premises, behind VPN, and in your Sync Retool apps to a Git repository, so you can manage Retool apps 


eploy via Docker or Kubernetes. as code. Oh, and choose what version is deployed in a nice GUI. 


І on-prem in 5 minutes > Set up Retool Git syncing > 


Google APIs 
keting Own all 2 
A 0 Postgres resource Retool EET Credeni 
Customer database 
tomer success Edit all @ Team database = Retool ‘i 
$ ^ м Ока verfied ~ SAML v Pr tials 
Da 
ned access controls & audit logs SAML SSO and 2ҒА 
Granularly control what users can access which apps and which Sign in with the services you already use, including Google, Okta, 
resources. And after they use the apps, query what they did via the Active Directory Federation Services, and other SAML-based identity 


audit logs. (Which you can then build Retool apps atop of.) providers. Import groups and use them inside of Retool. 


Control user permissions > How to set up SAML 3 
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Eco-Friendly C Dog Collar | Dog Coll... Есо-Ғпеге Bet Poop Bag Dispen... Eco-Friendly Hemp Dog Harness | Pet 5... Eco-Friendly Hemp Pet Collar | Dog Col... 
EUR 27.00 HE shipping EUR 15.00 Fr EUR 40.00 FREE shipping EUR 25.00 FREE shipping 


Only 3 left 4 people have this in their cart 5 people have this in their cart 


Eco-Friendly Hemp Pet Leash | Pet Leas... Eco-Friendly Cork Dog Collar | Dog Coll... Eco-Friendly Cork Dog Collar | Black Do... Blue Dog Collar | Eco-Friendly Hemp Ре... 


EUR 30.00 FREE shipping EUR 22.00 FREE shipping EUR 22.00 FREE shipping EUR 25.00 FREE shipping 
Only 2 left 


Ep 63 d 


World-class partners 


Connect with LinkedIn, Google and Reach our award-winning support Sleep soundly g your data is 


70+ othq team in about 25 seconds by always safe and always accessible. 


phone or chat. We're ISO-certified. 


ere recruiting Expert advice nboarding 


Keep things moving from anywhere Make the right moves with help Get up and running in days, not 


with our top-rated mobile hiring from 1000s of hiring templates and months — Workable is just that 


app. tutorials. easy to use. 
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My Invited Visitors 


office safe a e. Allow visitors to check in, 


, and print badge . Our software also 
save time by allowing loyees to pre- 


eir guests. 


ILL 


Scheduling 


S stress-free with Eden Workplace's room 

ware. Book conference rooms, check in and out 
of 
and S 


5, and integrate meetings with Google Calendar 


Learn More 


Tickets + 


СИ. БШГЕШ 


Modern Ticketing 


Make service requests easier to send and track. With Eden 
Workplace, employees can file tickets for all of their needs and 
workplace managers can organize and handle tickets in one 


place. 


Learn More 


Change HVAC Filter шн ж 


Schedule 


Facilities Manage 


Manage your property efficiently work orders 
and customized notifications. Track re aintenance 
appointments for all your important assets and systems in your 


space. 


Learn More 


4 Comments 


Purchase a 
gift card for 
the holidays. 


ona for tna, 


| love this clutch! It's classy, well made, 
size for small outings. 


© 
- 


Reviews 


Squarespace makes it easy to build customer trust 
through product reviews. Options range from simple 
ML review boxes to directly embedding customers’ 
aws from Facebook. 


Gift cards 


Gift cards are an ea 
products with their 


ay for customers to share your 
ily and friends. 


Ventura 


Milk Dip ( Monthly Coffee 
GENE LL - 5 Subscriptions 


520.00 Monthly 
+ monthly coffee subscription is 


teed to keep you feeling energized 
of the year. 


| 


Social integrations Subscriptions 

Generate recurring revenue and build customer loyalty 
by selling subscriptions to your products on a weekly 
or monthly basis. 


Easily share your products to Facebook, Twitter, and 
Pinterest, and tag products in your Instagram posts. 


end 


Alexander 


Fried Filler 
Backend 


© @friedfiller 


ison Barkley Dominique Jackson Erin Carey 
A Content Marketing Happiness 


© @thatg! © @djthewriter © @butterednap 


Josh Pigford Martin Rariga Pieter Beulque 
Founder Design Frontend 
© @shpigford © @martinrariga © @pieterbeulque 
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Feature row section component Feature row section component 


Trust our team of 
experts to deliver 


Keep your team in the loop 


Keep your sales and finance teams on the same Re: 1st reminder : overdue invoices $8,649.00 
авеовеововововововововововововонвовевм "m ; ; 
ш ш раде ру giving them an overview of their Hey Ben, | did receive your invoice, is it okay to pay on 
ы m$ Design consultants д1 One point of contact я receivables. о: 
|| Our team can help you create your You have one point of contact — us. ш Р BONOS Regards, 
| FF&E specification, keeping it on time We'll handle every supplier and all E er u Charles 
| and in budget. the admin. = u SE m 
ш m = = 
[| E H ш в 
m 5] Installation Bb Consolidated delivery и = Internal communication Assignments " Э @Marie can you handle this? 
Е қ 
= On-site installation including We'll consolidate orders from multiple = H Use comments to keep Bring the right team ш 
assembly, positioning, snagging and suppliers and deliver when required, я ш » ER , ith fi 
и Е os id 3 п M others up to date on the members into the loop when (3) @Benjamin sure, Ill check with finance. 
packaging removal. ш ш 
= и m account needed a 
FEE BB BBR RRR RRR Ree N En m" n 2 $8 649.00 
Er EEE EEE EEE EEE EEE EEE EEE BEE EEE EEG O | : 


rayment expected ог 


Grid pattern 


Row pattern 


Feature row section 


-. 


OUR MISSION 


We help SMEs to create 


Get the help you need, ; 
every step of the way | | IA ы 


Grid pattern 


EEE SEE EEE EEE EEE EB BE BE BE BE BE BE EB EEE EEE En | > f 
: empowering workplaces for 
Shopify support Shopify App Store u h е 
ы Ir m 
Contact support 24/7, whether you're Add features and functionality to в mes 3 F t је! ' tear = 5. НННЕНШШИШНШИШниннинин 
troubleshooting issues or looking for your business with 6,000+ apps that u. 3 | z E 
А я я Е s Е : ш 
business advice. integrate directly with Shopify. = " 9,000 small businesses 200k employees are = 
Contact support > Visit the Shopify App Store > H = т - апа соч nting. actively using Swingvy. = 
ш = 2. 
1: = : 
и " 94% of customers аге 90% of customers told = 
Shopify Experts Marketplace = B ~ . . Қ = 
| m likely to recommend us switching to Swingvy y 
Hire a Shopify expert to help you E ш Swi А а 
with everything from store setup to E . B wingvy. IS easy. - 
SEO. : Е " s 
B нонни БЯ 
Explore the Shopify Experts Marketplace > = Ф 
- Grid pattern S, 
DONNA A |. 
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We're not about 
pseudoscience and half- 
truths 


From D3 to 


our scientists studied diets and 


ссу nutrients we need. 


Multivitamin for Wo 


amin for Kids 4+ 


You deserve trace 


We share sources, studies, an "— our multivitamin = 


is Made Traceable” with t 
kind. 


рріу chain of its © 


Who We Are 


Meet Our Ingredients 


Our Clinical Study 


Clean and simple, delivered 


Easy-to-start. Easy-to-cancel. Our team of scientists and 
nutritional experts are on a mission to turn your new healthy 


habit into а Еда! 


Control delivery date 


Free and easy cancellation 


С) 30-day money back guarantee 


@ Preview 4) моп09:41АМ Q 


Quick Access 


Our overlay makes sharing a breeze. Instantly save, 


copy or drag % drop screenshots 
recordings to other apps. 
looks like, it's 


b Watch the video 


The essential swiss army knife 
markups, and GIFs. Every Mac ow 


Tyler Tringas, Founder at Earnest Ca 


Annota 
-- 4 


In a matter of secon 


portant parts of 


Spam tool. Loved by 
Archived our users, It beats any other annotation app. 
Trash 


My accounts 


а(а)о / / А хи ө ге 


npleted 127 runs 


w^ Free Cloud account included 


CleanShot Cloud 


Upload your captures to 


—— Your Screenshot 


instantly get a shareable link. 


@ Upload & get a link in a single click 


Фр  Proversion with advanced features soon 


Wallpaper-1400x900-2 


өз os 


% 


Automated triggers 


Automatically trigger any function to run when a new deploy 


succeeds, a user authenticates, new form submission 


See all available events > 


Third-party APIs 


sanitize user data before sendin 


on to third-party functions to process API respon 


and combine API services in ne 


Check out some examples > 


authentication 


Instead of managing sessions rver, use JavaScript Web 
ser, passing session 


tokens directly to your serverlegs functions. 


Learn more about Identity > 
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Searching for locations 


Increase conversions by connecting customers with nearby places and ( 4 
4 
things. 0 t 
E 
4 
Search and ge | 
А | 4 t 4 
Flexible and affordablé ing, search, and 4 4 4 
distance APIs with high-qua ess and ( 4 i : % N 
4 


place data. 
Ma, o restaurant 
MIN 
{ \ Se 


| Г 


On the way їо а 


Increase efficiency and impro experience with trip 


tracking and live ETAs. 


rip tracking 


Everything you need to build delivery, curbside 


\ 
{ 


pickup, order-ahead, and location sharing 
ETA 


8 minutes 


/ “а 
= 


features. 


In a location 


Geofencing > 


Support for unlin 


geofences, out-of-the-b& fences for places 


and regions, and more. 


сеа McRadar's 
Welcome to McRadar's! Your 
order is ready. 


c Just send a link 
тшшш and let others take 


it from there 


гуроо 


inspect Designs 


ооо Collaborate on Dasigns 


Review and discuss 
changes in one place 


am More > 


The best avocad 
we made so far. 


Test Coded Designs 


Deliver 


FEEDBACK Sarah Peters 10m ago 


Collect feedback with 


e Can we change the typeface to Lato? I 
also prefer this color: #2F3663. 


о пе cl ic k Mark Complete 2 replies 
Share your депегадва В 

begin collecting 

Click on a design to leave ck and keep all Reece Olatunji керер 

your feedback іп one place. no confusion These aren't quite aligned. Let's align е 


апа no more endless emails. them with the section below. 


Mark Complete 


QR) Private This board is currently private 


Copy & share this link 


share your designs with. 


Invite via email | қР . 
Private boards are invite-only in order to keep your 
Enter their emai designs private. Public boards allow you to share your 


designs with anyone, using a simple link. 


Invites sent: 
tylerdamien@gmail.com Revoke access 
lucythompson@workday.com Revoke access 


04 F-PATTERN 


NOVEMBER 12, 2020 


ention-grabbing resume with 
storytelling 


SEPTEMBER 18, 2020 


5 nical resume to land an interview at 
Webflow 


AUGUST 27, 2020 


An interview with 4 Webflow managers 


AUGUST 13, 2020 


Transitioning into tech 


JULY 9, 2620 


Webflow code Challenge: a prep guide 


Digestive Enzymes 


as biological catalysts to break 


up & digest other proteins, fats, and ca 


ates. They are found in humans, 
plants, animals, and fungi. In the human body, they’re naturally produced in the 


gastrointestinal tract and used to break down food. 


( Learn Моге >) 


Probiotics 


e body, are microscopic living 


organisms intended to benefit our healt 


By improving or restoring the gut flora. 


While the use of probiotics for purported health benefits is far from new - dating 


back to Roman times! - their use is increasingly being studied for potential 
benefits such as preventing infections, boosting the immune system, maintaining 


healthy skin, and strengthening our nervous system. 


[ Learn More ) 


You can think of prebiotics as "food" for Ог probiotics. They support the growth 


of healthy and beneficial bacteria in the gut and they can lead to durable change 


in the overall function of the gut microbial community. 


Learn More 
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$ GraphQL execution failed 


О ap EN == 


sue linked 


Automate tracking with GitHub, 
Gitlab and Sentry Activity 
12) jori 


@ tuomas 
GitHub #758 In Review 


GitHub #758 Done 


a karri 


Worked on the design syster eckout the designs here 


Preview and embed full Figma 
designs in Linear. 


> Ries АР 


ew issue cre 


= 
o 
Ne should make the ¡OS status bar range with the theme 


Get updates and create issues with 
Slack 


linear issue title (optional) 
> 


О PATTERNS 


А u _ БІ Google Docs 
CONVERSATION 


pi//docs.google.com/document/1Htf pOLKhS 


9 (you) 


Quick Collaboration 


See which work apps your team is working in, and 
join them with a click. Shared cursors = better 
screen-sharing. 


ы 


e Кемп 4. Asana 
е Lisa [Y Trello 


e Matt Ñ Notion 


e Lucy @ Sketch 


Alex joined you in 
Water Cooler 0 room 


4) Water Cooler 0 


Spontaneous Conversá $ 


Time zones got you working late? See who is also іп 
work mode and get quick feedback on your work. 


e Alex 4» Asana 


e (you) В Googie Do 
4) Daily Standup 77 
4) Feedback Needed > 


+ Add Room 


B Google Docs 


Co-working 


Hang out in a minimal voice/video call to feel 
connected — like you're working at the same table. 


a Dmitry Yarygin in The Shadow 


Two reasons why І am skipping Z : 
Macs 
And why you should think twice before buying Apple hardware 


Feb 27 · 7 min read - Popular on Medium Ж [.] ... 


f^ Buninuxin Prototypr How to Make 


Badass Shad 
How to Make Badass Shadow bes 
Tips to help create better Ul shadows. 


Feb 26 · З min read - Based on your reading history 


me Sean Kernan in Mind Cafe 


Five Signs of a Highly Intelligent a 


Accurately sizing up someone's mental acuity iS "Wialuable life skill. 


[] • 


Mar 7 · 5min read * Popular on Medium Ж 


- Mohammad Faisal in Better Programming 


The 7 Traits of a Rock Star Reac уеторе 
Habits that make the difference 


Mar 3 · 4 min read - Based on your reading history Ж 


Natasha 


Rashid 


А) 


аһ 


О5 SINGLE COLUMN 


Texts 


One inbox. 
All your messages. 


Sign up with Google 


Preter entering email instead? 


өс @ Kishan Bagaria 


Inbox 
8) Jordan Singer 
m Sahil Lavingia 
Q Claire Diaz-Ortiz 
what's up 
е Kishan Bagaría 
= 
7. Freia Lobo 3h oh cool! love to be featured 


2E 


[2] Kishan Bagaria ~ 


Allin one. 


Jan 20, 2020 


Texts has integrations for all major messaging platforms including iMessage, SMS (with iMessage), WhatsApp, Telegram, Signal, FB 


Messenger, Twitter, Instagram, Linkedin and Discord DMs. 


Privacy first. 


Messages never touch our servers. They're sent directly to the platforms preserving end-to-end encryption. We make money by charging 


you a monthly subscription, 


Archive. Snooze. Mark as unread. 


Never miss a message again. Archive chats to hit inbox zero. Keep chats unread by default until you respond to them. Snooze people that 


you don't want to get to just yet. 


Send later. 


Schedule messages so they get sent at appropriate times when people are active. 


Search all messages. 


Find that link, document, picture or video from forever ago easily. 


Customizable. 


Use the custom CSS feature to customize Texts to the last pixel. 


о vivian іп пус e Brian Lovin 


i've been using (on macos) for Got access to 


@ © vivian in nyc anphung 
YALL WHY AREN'T TWITTER DMS 
SEARCHABLE 


3 Kishan Bagaria 
E T 


yesterday. It's how it started how it's going 
less than seven hrs & it's been life altering: nice! Specifically, | love the feature where 

all my dms + imessage in one inbox w messages stay unread until you actually 

search & other advance features. sign up reply. 
for early access @ 


Twitter - Support · Privacy - We're hiring! 


A HEART FOR INGA 


INGA- 


SAURUS 
OLOURING 


Inga loves dinosaurs, she has a big collection of them, 
but Inga also has an extremely rare heart defect and 
needs a life saving operation urgently. 


To help raise money for her surgery іп the USA - the only place in the world 
performing such specialist heart surgery - we've created the Ingasaurus 
colouring book. 


We invited artists and illustrators from around the world to donate a dinosaur, 
creating this dino-tastic collection ready for your favourite colouring pencils! 


Or, simply share Ingasaurus with some of your friends 


Ноуе dinosaurs because there 
are so many of them, you can 
learn about a new one everyday. 
But also becasue they are big and 
scary! RAWR! 


Inga 5 years old 


A heart for Inga 

Bart's niece, Inga, has an extreme form of Ebstein's Anomaly, a rare heart defect. 
At five years old, she is already halfway through her life without the heart 
Surgery she needs to survive. 


This surgery is only available at the Ebstein's Anomaly Center in the United 
States, far from Inga's home in Poland. Her family need to raise £250,000 by the 
end of March 2021 to fund this lifesaving treatment and give Inga the best 
possible chance of a healthy, normal life, 


Any donation you can give to help Bart's family reach their fundraising goal 
would be enormously appreciated. 


Your cretaceous colouring 

Have you had a roarrrrrring time? Send us a photo of your coloured 
masterpiece or share your Cretaceous colouring with us on Facebook and 
Twitter #ingasaurus. 


Huge thanks to all of the amazing artists who have made 
this book possible. 


If you're an illustrator, creative or artist and would like 
to donate your dinosaur, please get in touch: 
dinosaur@primate.co.uk 


Built with Y by Primate 


Loading script asynchronously as a 
Promise in JavaScript 


const 1 15ст ( азуп text/javascript") 


return new ( ) 


try 
const ta cre в cript") 
const ) 1 m 
t г t 
tag yn async 
t I 
t E t "1оа‹ 
t t " І 
| 
Еа1 t oad script with src ${sr 
catch | 1 
І ( І 
loa 
15ст http wy t iframe_api 
(( ) = 
jg ("YouTube ript successfully loaded", dat 
) 
itch(( ) => ( 
error(err 
j: 
That's it! 
eiior y u € 
Thanks for reading! @ 
Read more 
Why sl switch to Jamstack? 
Work on your personal branding as a developer 


Password protect a Netlify site through GitHub Actions 


D PATTERNS 


г) DigitalOcean = 


Welcome to the developer cloud 


We make it simple to launch in the cloud and scale up as 
you grow — with an intuitive control panel, predictable 
pricing, team accounts, and more. 


Deploy in seconds 


By signing up you agree to the Terms of Service, 


INNOVATIVE BUSINESSES TRUST DIGITALOCEAN 


@ docker 
де slack 
ЇН) HashiCorp 
splunk 


Planning to create static sites? 


Deploy and scale seamlessly 


Deploy e t 


$ 


Kubernetes in minutes 


Ф 


Flexible compute types 


а, 


App Platform 
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= Create stronger proposals in less time and Send unlimited eSignature requests, eSign 
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Е close deals faster with Zendesk Sell and documents yourself, and check document 
Cotton/Poly Blend PandaDoc. status — all within Word. 
Tri-Blend Explore Explore 
Fleece 
Other 
Build-to-rent developer Quintain Living approaches each new А 
t’s по wonder polling shows that nearly half of U.S. workers want to 
Project summary development with the mentality of a start-up: eager to try new Laura venderam А аны y E | А 
| | ) Laura Vanderkam 15 keep working from home even after restrictions lift: There's so much 
ways of working, one of the team's core values is to keep on the author of several flexibili th h | ith ff 
Furniture and lighting for 83 flats, learning. time management more flexibility. Without a commute, hours are less set. Without an office, 
plus indoor and outdoor amenity a, everyone is less subject to the group norms that have night owls trying to 
spaces So when it came to finding a design concept for Beton, Quintain Hours. She blogs at look alert at 8 a.m., and that makes people self-conscious about leaving the 
LauraVanderkam. на: 
> Personal design consultation to Living's latest BTR apartment building, the team was open to a "- и building for any reason. 
create final product specification new approach. “We wanted to try a different methodology,” 
> An easy approval process for explains Head of Mobilisation Jennie Fojtik, who is responsible | коо, | Still, many people feel reticent about using this freedom. Anecdotes abound 
product suggestions on the for filling an empty building with modern flats and engaging of people sitting hunched at their computers without ceasing, not so much 
Clippings platform amenity spaces for successful young professionals. 6 as leaving the house for days at a time. In one survey of people working 
8.6K . : . Д 
d Consolidation of fumituro and from home, two-thirds said they were more likely to work nights and 
lighting accessories from over 50 С) эт weekends than they were prior to working remotely. 
suppliers in the Clippings Е 
warehouse N 


The 3 Breaks You Need to Take Every Day 


An easy strategy for being happier and more productive at work 


> Furniture installation on-site in 
line with all Covid-19 safety 
guidelines in May and June 2020 


TABLE OF CONTENTS 


: forge.medium.com 
Track your time 


Start small 


Make a list of adven... 
рака But fair is fair. It’s likely your workplace is benefiting from you working 


remotely. Why shouldn't you get something out of it, too? Here's how you 
can start using during-the-day flexibility to improve your life satisfaction: 


Test drive and iterate 
Maybe don't annou... 
Don't apologize, eit... 


Track your time 
Work hours don't perfectly correlate with productivity, but if you know that 


A 1-bedroom flat in the Beton building, furnished with the Working Girl 
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| just activated the NEW complete JavaScript course on udemy! 
Buy storage 


If you already bought the course, check out the migration guide Ш (lecture 4) 
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COVID-19: Live updates Vaccinations by country TRENDING: Pele stadium tribute Namibia's First Lady Meteor Ronaldo's error ‘House of Gucci' 


House set for 
stimulus vote 


Coronavirus economic impact 


Biden's $1.9tn stimulus 
package set for final vote 


Passage of sweeping bill would mark a milestone in the new 
administration's efforts to address the pandemic 


Vice President Kamala Harris 
waits for her own portfolio as 
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network over Piers Morgan's 


US politics £ policy 
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out government websites 
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Greensill Capital GameStop Corp McKinsey 
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^^ Michelle Obama opens up about 


How Ron Kim 
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Retail investor 
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Here's what we know so far about the massive 
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How NFTs are fueling a digital 
art boom 
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Coronavirus Pandemic > 


Daniel Dombey 
French lockdown escapees 


Covid variant up to twice : 4 
party in Madrid 


as lethal as previous 
strains, UK study shows 


Regional chief welcomes foreign 
tourists even as travel within Spain 
remains restricted 


Research finds highly infectious 
811.7 virus first detected іп Kent 
causes more severe disease 


Coronavirus economic impact 
Pandemic blamed for falling birth rates 
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Sharp declines in babies being born 9 months or 
more on from lockdowns in France, Italy and Spain 
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Vaccine tips and tricks: a start-up industry 
helps Americans find a shot 


08 ASYMMETRY / EXPERIMENTAL 


© Honk 


Real-time 
messaging. 


Honk is the all-new way to chat with your friends 
in real time, with messages shown live as you type. 


€ App Store Stop Waiting Around 

for Messages 

Live Typing No Send Button No Chat History 

Only two live messages, instead of thousands 
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React in Real-Time Keep Your Friends Close 


with Huge Emojis 


140 


Be Present 


Join Honk 


pda 


@ App Store Y Twitter 


74 A. 
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A Minneapolis/St. Paul Business 
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How 1t works 


I 9 


The Better Work X j PRACTI G Е 
ues X (Y< REVENUE 


See how 200+ revenue leaders from 


POULOS Mene M -- =~ ң 
E И S 
Hello 7; 


Poulos Collective is a design 
consultancy that specializes 


in visual design and ux 
г, strategy for design systems, 
New perspectives as an mobile applications and 


independent creative desktop platforms. 
E 


Simply connect your Instapaper or Pocket 
account (о Alfread*  ”».,,, 


around the globe approach skills 


development, teamwork, and practice REMIND ME 


| © AFTER WAKING up 


ARTICLES PER WEED Get a gentle 


VICTOR BOKAS 


reminder when 
Set a realistic reading you want. Or 
goal for yourself where you want 


Testimonials so» 1 

articles 
І have been working along side Stefan for just short of 5 years and they've automatically, Automatically 
been the most impactful years in my career so far. He's the only person | . . . 
know in this business who somehow manages to perform like а machine and 1 month after organize articles with 
at the same time stay human. He works harder than anyone I've ever known . ' 
апа cares deeply about the work we do. He's incredibly passionate, has his Hey Brad, Hey Emma, adding or keep them if Alfread 5 smart tags 
finger on every pulse of our industry and has a wealth of inspiration and Personalization in progress, Your security shortcuts are they are your precious 


knowledge that's impossible to keep up with. He makes me want to be a 


better creative and a better person, every day. 


Alison Medland, IDEO 


Hey Sa brina, please wait a sec... almost there 


We're preparing the best 
shortcuts to start your Clear 
experience 


A 


з e 


я. 
Hey Steve, Ё 


Your personalized shortcuts 
are ready! 
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7 
5 5 
а 


Build a reading habit. 
Watch it evolve 


AND MUCH MORE! 


© <> (+) 
SMART SEARCH READING INSIGHTS iOS EXTENSION 


COMING SOON 


Celebrate 
every article 
that gets read 
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OMNIFOOD PROJECT - 
SETUP AND DESKTOP 

VERSION 
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SECTION 


OMNIFOOD PROJECT = SETUP 
AND DESKTOP VERSION 


LECTURE 


THE 7 STEPS TOA GREAT 
WEBSITE 


HTML 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


a DEFINE THE PROJECT 


“ғ 


Define WHO the website is for. Is it for yourself? For a client of 
your agency or your freelancing business? 


Define WHAT the website is for. In other words, define business 
and user goals of your website project (Y See lecture on UX) 


Business goal example: Selling premium dog food 
User goal example: Finding high-quality dog food for good price 
Define a target audience. Be really specific if possible and if it 


makes sense for your website (this can come from your client) 


Example: “Women, 20 to 40 years old, living in Europe, earning 
over 2000€/month, with a passion for dogs” 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


2 PLAN THE PROJECT 


“ғ 


" m 


Plan and gather website content: copy (text), images, videos etc. 


Content is usually provided by the client, but you also can help 
them produce and find some content (simply finding free images 
is easiest, but if they want copy, charge them extra) 


For bigger sites, plan out the sitemap: what pages the site needs, 
and how they are related to one another (content hierarchy) 


Based on the content, plan what sections each page needs in 
order to convey the content's message, and in which order 


Define the website personality (27 See web design section) 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


3 SKETCH LAYOUT AND COMPONENT IDEAS 


@- 


Think about what components you need, and how you can use 
them in layout patterns (Y Get inspiration in web design section) 


Get ideas out of your head: sketch them with pen and paper or 
with some design software (e.g. Figma $$) 


This is an iterative process: experiment with different 
components and layouts, until you arrive at a first good solution 


You don't need to sketch everything, and don't make it perfect. 
At some point, you're ready to jump into HTML and CSS 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


а DESIGN AND BUILD WEBSITE 


г Use decisions, content and sketches from Steps 1, 2 and З to 
design and build the website with HTML and CSS (“designing in 
the browser”) 


г You already have the layout and components that you selected in 
Step 3. In this step, you need to design the actual visual styles 


г Create the design based on selected website personality, the 
design guidelines | showed you, and inspiration (2) See web 
design section) 


г Use the client's branding (it if exists already) for design decisions 
whenever possible: colors, typography, icons, etc. 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


5 TEST AND OPTIMIZE 


& Make sure website works well in all major browsers (Chrome, 
Firefox, Safari, Edge, maybe even old IE 62) 


г Test the website on actual mobile devices, not just in DevTools 


< Optimize all images, in terms of dimensions апа file size (Y See 
lecture on images) 


г Fix simple accessibility problems (e.g. color contrast issues) 


2 Run the Lighthouse performance test in Chrome DevTools and try 
to fix reported issues 


+ Think about Search Engine Optimization (SEO) 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


в LAUNCH THE MASTERPIECE Ж 


г Once all work is done, everything is perfect, and you got approval 
from your client (or yourself ез), it's time to share your 
masterpiece with the world! 


г Upload your website files to a hosting platform. There are 
ет 
countless platform, we will use one with a free plan (Ме Шу 42%) 


г Choose and buy a great domain name, one that represents the 
brand well, is memorable and easy to write 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


@) MAINTAIN AND KEEP UPDATING WEBSITE 


@- 


@- 


Launching is not the end... 


Keep the website content updated over time. If you’re working 
with a client, you can create a monthly maintenance contract 
(recurring revenue @) 


Install analytics software (e.g. Google Analytics or Fathom) to get 
Statistics about website users. This may inform future changes in 
the site structure and content. 


A blog that is updated regularly is a good way to keep users 
coming back, and is also good for SEO. 
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SECTION 


OMNIFOOD PROJECT = SETUP 
AND DESKTOP VERSION 


LECTURE 


DEFINING AND PLANNING THE 
PROJECT (STEPS 1 AND 2) 


HTML 


рагїп 
Japanese Gyozas for you. 
Your meal will be delivered at: 


< Your first “job”! 


< You were hired to design and build 
a website for a fictional company 
called Omnifood 


г Omnifood is startup that uses Al to 
create and deliver custom healthy 
meal plans 


=> They provided us with all the content 
for the website (content. та) 


< Define WHO the website 15 for 


For a client 


< Define WHAT the website is for 


Business goal: Selling monthly food subscription 


User goal: Eating well effortlessly, without spending a 


lot of time and money 


=> Define target audience 


Busy people who like technology, are interested in a 


healthy diet, and have a well-paying job 


From provided content file: 


“We are a technology company first, but with a major 
focus on consumer well-being through a healthy diet. 
Most people are very busy with their jobs, family and 
friends, and other important activities, which doesn't 


leave much time for cooking. This might lead to a poor 


diet and lasting health consequences. We want to 


solve this problem by using aniAl-centric approach. 


Users can use our app to select their diet and foods 
they like and dislike, and oul Al algorithm Wil create a 
custom and individual weekly meal plan. But we don't 
stop there. We partner with restaurants and other 
cooking partners to actually cook and deliver all meals 
from the generated meal plans, in selected cities. All 
this will be packed up in a monthly subscription, 


where users can choose between receiving one or 


two meals per day, every single day of the month.” 


Plan апа gather website content 
© Plan out the sitemap 


We will just build a one-page marketing website 
(oftentimes called a landing page), so no sitemap 


< Define website personality 


Based on the tech-centered target audience, as well as 
the actual product being sold, we will use the startup/ 
upbeat personality. We might add some elements of the 
calm/peaceful personality, since the product is all about 
consumer well-being as well 


=> Plan page sections $ 


From provided content file: 


“We are a technology company first, but with a major 


focus on consumer well-being through a healthy diet. 


Most people are very busy with their jobs, family and 
friends, and other important activities, which doesn't 
leave much time for cooking. This might lead to a poor 
diet and lasting health consequences. We want to 
solve this problem by using an Al-centric approach. 
Users can use our app to select their diet and foods 
they like and dislike, and our Al algorithm will create a 
custom and individual weekly meal plan. But we don't 
stop there. We partner with restaurants and other 
cooking partners to actually cook and deliver all meals 
from the generated meal plans, in selected cities. All 
this will be packed up in a monthly subscription, 
where users can choose between receiving one or 


two meals per day, every single day of the month.” 
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Logo + Navigation 
Hero 

Featured in 

How ЇЇ works 
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Pricing + features 

CTA 


Footer 


l installed Fathom on my personal website 
yesterday, and wow, what a breath of fresh air. 
| love how simple it is, and for something like а 
blog it really gives you all the traffic metrics 
you could need. 


Joel Gascoigne, CEO of Buffer 


Fathom is the perfect privacy-based Analytics 
solution for us. We can provide the metrics 
that our clients need and reassure them that 
their customers' data isn't being shared with 
faceless companies. 


Darren Pinder, owner of Vatu 


Preview this course 


€12.99 «2999 90% off 


© 5 hours left at this price! 


Add to cart 


Buy now 


30-Day Money-Back Guarantee 


This course includes: 


СЈ 68 hours on-demand video 
D 20 articles 

СО 18 downloadable resources 
co Full lifetime access 

0 Access on mobile and TV 
Я Certificate of completion 


P 

І switched to Fathom because it's an ethical 
analytics tool that | can trust with my data. 
The interface is beautifully simple to use: it 


shows me everything | want to know about my 
site's performance, and nothing | don't! 


Charli Marie, creative director of ConvertKit 
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Developers are pretty tech-savvy people, and 
these days very privacy-cautious-they 
understand how scripts follow you across the 
internet, that's why we choose Fathom, 
because they don't do that. 


Oskar Krawczyk, cofounder of JSFiddle 
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for fast-moving teams 


Improve your document workflow to allow 
for increased productivity and to deliver 
an amazing experience for your 
customers. 


Start free 14-day trial Request a demo 
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any possible screen size (window or viewport size) 


=> Design technique to make a webpage adjust its layout and visual style to 


< |n practice, this means that responsive design makes websites usable on 


all devices, such as desktop computers, tablets, and mobile phones. 


< It's a set of practices, not a separate technology. It's all just CSS! 
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OMNIF COD Howitworks Meals Testimonials Pricing Try for free 


A healthy meal 
delivered to your door, 
every single day 


The smart 365-days-per-year food subscription that 
will make you eat healthy again. Tailored to your 
personal tastes and nutritional needs. 


Start eating well Learn more l 


f 250,000- meals delivered last 
a year! 


ASF ATUR 4 
"EQ" Tarhfruneh BUSINESS Fhe Nem dork тес Enrhac Mà iisa TANAY 


OMNIF со D How it works Meals Testimonials Pricing Try for free 


A healthy meal 
delivered to your door, 
every single day 


VIEWPORT 
WIDTH 


The smart 365-days-per-year food subscription that will 
make you eat healthy again. Tailored to your personal tastes 


acceso 250,000+ meals delivered last year! 


TE TechCrunch 5951455 Ehe New Mork Times Forbes O usatoDay 


FLUID LAYOUTS 


< То allow webpage to adapt to the current 
viewport width (or even height) 


& Use % (or vh / vw) unit instead of px for elements 
that should adapt to viewport (usually layout) 


& Use max-width instead of width 


FLEXIBLE IMAGES 


=> By default, images don't scale automatically as 


we change the viewport, so we need to fix that 


г Always use % for image dimensions, together 
with the max-width property 


RESPONSIVE UNITS 


Use rem unit instead of px for most lengths 


< To make it easy to scale the entire layout down 
(or ир) automatically 


< Helpful trick: setting 1rem to 10px for easy 
calculations 


MEDIA QUERIES 


г Bring responsive sites to life! 


2 To change CSS styles on certain viewport 
widths (called breakpoints) 


V We will learn how to use media 


queries and how to select 
breakpoints in the next section 


г Start writing CSS for the desktop: large screen 


г Then, media queries shrink design to smaller 
screens. 


OMNIF COD 


OMNIF 00D = 

A healthy meal A healthy meal 

delivered to your delivered to your door, 

door, every single 
day 


every single day 


г Start writing CSS for mobile devices: small screen Ne 
We will do desktop- 


г Then, media queries expand design to a large first in this project. 
It’s easier to learn! 


screen 


=> Forces us to reduce websites and apps to the 
absolute essentials. 
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Beyond eSignature: 
Document automation 
for fast-moving teams 


Improve your document workflow to allow 
for increased productivity and to deliver 
an amazing experience for your 
customers. 


Start free 14-day trial Request a demo 
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Leave Me Alone 


Easily unsubscribe 
from unwanted emails 


See all of your newsletters in one place and 
unsubscribe from them with a single click. 


Start unsubscribing for free > 


3260-00-03 


Join 37,967 people like you who have 


unsubscribed from a total of 541,116 emails 


Learn more ~ Pricing Log in Start unsubscribing > 
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Right-click on any image on any website 


and click Save to project 
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Save it to Clippings 
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Get started wit 


Cover today. 


We'll source it for you 


Request a quote on Clippings, and our 


team will source it for you.* 


Quick Access 


Our overlay makes sharing a breeze. Instantly save, 
copy or drag & drop screenshots or screen 
recordings to other apps. Whatever your workflow 
looks like, it's going to fit. 


» Watch the video 


The essential swiss army knife for screenshots, 
markups, and GIFs. Every Mac owner needs this. 


Tyler Tringas, Founder at Earnest Capital 


u опво/ е ш Че дел 


- - а 4 
[e m 
Spam 
Archived 
Trash 
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CleanShot Cloud 


Upload your captures to our blazing-fast Cloud and 
instantly get a shareable link. 


(P Upload & get a link in a single click 


47 Proversion with advanced features soon 


не 
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Annotate 


In a matter of seconds highlight important parts of 
your screenshot with our annotation tool. Loved by 
our users, it beats any other annotation app. 
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Preview this course 
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30-Day Money-Back Guarantee 


е From Irish seawater 


е Includes 72 trace minerals 


This course includes: e High solubility 
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D 20 articles reactions in the body 


18 downloadable resources 
Full lifetime access 
$8 Add 


ЕЗ 
со 
[] Access on mobile and TV 
R 


Certificate of completion 


Apply Coupon 


.meal-attributes 4 


} 


display: flex; 
gap: 2rem; 
flex-direction: column; 


CROSS AXIS 


MAIN AXIS 


WITH FLEX-DIRECTION SET 
TO COLUMN: 


< align-items aligns items 
horizontally, no longer vertically 


< justify-content aligns items 
vertically, no longer horizontally 


< gap acts like margin-bottom, 
no longer like margin-right 
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| installed Fathom on my personal website 
yesterday, and wow, what a breath of fresh air. 
| love how simple it is, and for something like a 
blog it really gives you all the traffic metrics 
you could need. 


Joel Gascoigne, CEO of Buffer 


Fathom is the perfect privacy-based Analytics 
solution for us. We can provide the metrics 
that our clients need and reassure them that 
their customers' data isn't being shared with 
faceless companies. 


Darren Pinder, owner of Vatu 


Чу 

| switched to Fathom because it's an ethical 
analytics tool that | can trust with my data. 
The interface is beautifully simple to use: it 


shows me everything | want to know about my 
site's performance, and nothing | don't! 


Charli Marie, creative director of ConvertKit 


Developers are pretty tech-savvy people, and 
these days very privacy-cautious-they 
understand how scripts follow you across the 
internet, that's why we choose Fathom, 
because they don't do that. 


Oskar Krawczyk, cofounder of JSFiddle 
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No Credit Card Required — No Risk 
o» Documents 


со Documents œ Pages Per Document 


1 Page Per Document Document Management 


Document Management Items Management 


Items Management Without Watermark 


Include Fastdok Watermark Priority Support 


Get Started Get Started 
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Tech that keeps you safe Humans on hand Strong privacy 


We support face € fingerprint ID, and Our customer support team is ready to We never share your data with any 
use 256-bit TLS encryption. help you, 7 days a week. other parties without your consent. 
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Get started with Sketch today 


Turn your ideas into incredible products with a 30-day trial. 


Try for Free 


Write to us 
Full Name Work Email 
Phone Number Company 
Company Size v Country v 


How can we help? (optional) 


Send Message 
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© VisualEyes 


Copyright O 2020 Loceye 
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VisualEyes 


Create Account 
Log In 
Pricing 


Status 


Company 


About 
Community 
Contact 


Learn 


Tools & Resources 


Above the fold plugin 


Blog 


Remote Eye-Tracking 


Use Cases 


Policy 


Privacy 


Security 
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Maximum width at which media query still applies N 


(media (max-width: 600px) @media (max-width: 1200рх) 


< “Iswidth <= 600px ?” < "Is width <= 1200px ?” 


"i 


< Code outside of 
any media query 


Opx 
600px 1200px 00 
400px 1000px 
SN Example: At a viewport SN Example: At a viewport width 
width of 400px, CSS in of 1000px, CSS from the 


both media queries applies 1200px media queries applies 
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Based on popular devices 


Based on screen width ranges 


When design breaks down 
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delivered to your 


door, every single 
day 
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delivered to your 
door, every single 
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Design breaks 


600px 


Design breaks 


A hoalthy meal delivered to your 


avery single day 
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600px - 900px 


¡delivered to your 
every single day 


Your daily dose of heath in 3 simple steps 


A healthy meal delivered to your door, 
avery single day 


A healthy meal d 
to your door, eve: 
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Your daily dose of health in 3 simple stops 
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A healthy meal delivered 
to your door, every single 
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A healthy meal а 
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